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:100px;
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:500px;
height:90vw;
overflow:visible;
position:relative;
z-index:25;
}<div id='container'><div id='logo'>LOGO</div><div id='filler'></div><div id='bg'>BackGround</div></div>