CODEWITHSUNDEEP
htmlcss
Paddy Hallihan
Paddy Hallihan

Reputation: 1696

CSS - Resuming normal document flow after absolute positioning an element

I have a div in my site that has absolute positioning but want to resume the normal document flow after it. Is there anything like clear:both; for this or will I need to create a hidden element with the same height to get the same effect.

So as you can seehere the 2nd Div is being hidden behind the absolute positioned element. 

div{
  width:100%;
  text-align:center;
  font-size:20px;
}
#div_1{
  position:absolute;
  height:50px;
  background-color:#F00;
}
#div_2{
  height:100px;
  background-color:#0F0;
}
  
<div id="div_1">Div that should appear on top</div>
<div id="div_2">Div that should appear below</div>

I need that element to stay absolute positioning but want to achieve the same doc flow as this: 

div{
  width:100%;
  text-align:center;
  font-size:20px;
}
#div_1{
  height:50px;
  background-color:#F00;
}
#div_2{
  height:100px;
  background-color:#0F0;
}
<div id="div_1">Div that should appear on top</div>
<div id="div_2">Div that should appear below</div>

Upvotes: 2

Views: 1545

Answers (1)

DKyleo
DKyleo

Reputation: 826

Once an absolutely positioned element is out of the document flow, there is no way of putting it back in.

Your suggestion to add in a hidden element is viable, but you can also set the margin-top of your second div to equal the height of the absolutely positioned element - which would place it below the first div.

Upvotes: 2

Related Questions