CODEWITHSUNDEEP
javascripthtmlcss
DCR
DCR

Reputation: 15700

place div on top of div

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>

Upvotes: 0

Views: 72

Answers (1)

Shubham
Shubham

Reputation: 189

Not sure if I answered this before but you achieve this with giving position:absolute to the background div. if you want the background to apper behind the two div reduce the z-index. Also i think you see the other two div over each other is because of negative margin.

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:100%;
height:90vw;
overflow:visible;
position:absolute;
z-index:5;

}
<div id="container">
   <div id="logo">LOGO</div>
   <div id="filler"></div>
   <div id="bg">BackGround</div>
</div>

Better approach will be to add the other two div inside the background div

Upvotes: 1

Related Questions