I have the following 3 divs. filler is on top of logo. All 3 div's line up correctly when logo has margin-left:100px. But when I change margin-left: to margin-left:200px the background gets pushed to the next line. Why does filler overlap logo but I'm unable to get filler and logo to overlap bg?
var logo = document.querySelector("#logo");
var bg = document.querySelector("#bg");
var rect_logo = logo.getBoundingClientRect();
var rect_bg = bg.getBoundingClientRect();
var filler = document.getElementById('filler');
filler.style.height = logo.offsetHeight + "px";#container {
height: 100vw;
}
#logo {
display: inline-block;
color: white;
background-color: lightblue;
position: relative;
width: 20%;
height: 5%;
text-align: center;
vertical-align: top;
z-index: 10;
margin-left: 300px;
overflow: visible;
}
#filler {
display: inline-block;
position: relative;
width: 50px;
background-color: green;
vertical-align: top;
z-index: 15;
margin-left: -75px;
overflow: visible;
}
#bg {
display: inline-block;
color: white;
background-color: blue;
width: 50%;
float: right;
height: 90vw;
overflow: visible;
position: relative;
z-index: 5;
margin-left: -75px;
}<div id='container'><div id='logo'>LOGO</div><div id='filler'></div><div id='bg'>BackGround</div></div>