CODEWITHSUNDEEP
htmlcss
russell
russell

Reputation: 83

Resume normal HTML flow after absolutely positioned div element

Is it possible to resume normal HTML after an absolutely positioned div element? I'm trying to use particle.js background in header div on top of which is child element (with some text only). Then from the end of parent div (particle-js div), I'd like normal HTML flow.

#parent {
  position: absolute;
  height: 200px;
  width: 200px;
  background-color: red;
}

#child {
  position: relative;
  left: 50px;
  top: 50px;
  height: 50px;
  width: 50px;
  background-color: green;
}

#after-parent {
  background-color: blue;
}
<div id="parent">
  <p>Parent div</p>
</div>
<div id="child">
  <p>child div</p>
</div>
<div id="after-parent">
  <h1>Normal HTML flow after parent div</h1>
</div>

Upvotes: 0

Views: 85

Answers (2)

Gabbr Issimo
Gabbr Issimo

Reputation: 111

You can wrap #parent and child inside another relative div e give it the height https://jsfiddle.net/f6phun8a/2/

#parent {
  position: absolute;
  height: 200px;
  width: 200px;
  background-color: red;
}
#outer {
  position: relative;
  height: 200px;
}
#child {
  position: relative;
  left: 50px;
  top: 50px;
  height: 50px;
  width: 50px;
  background-color: green;
}

#after-parent {
  background-color: blue;
}


<div id="outer">

<div id="parent">
  <p>Parent div</p>
</div>
<div id="child">
  <p>child div</p>
</div>

</div>
<div id="after-parent">
  <h1>Normal HTML flow after parent div</h1>
</div>

Upvotes: 1

Carol McKay
Carol McKay

Reputation: 2424

#flexwrap {
 display:flex;
 flex-direction:column;
}

#parent {
  flex:0 0 200px;
  position: absolute;
  height: 200px;
  width: 200px;
  background-color: red;
}

#child {
  flex:1;
  position: relative;
  margin-top: 200px;
  margin-left: 50px;
  height: 50px;
  width: 50px;
  background-color: green;
}

#after-parent {
  flex:1;
  background-color: blue;
}
<div id="flexwrap">
<div id="parent">
  <p>Parent div</p>
</div>
<div id="child">
  <p>child div</p>
</div>
<div id="after-parent">
  <h1>Normal HTML flow after parent div</h1>
</div>
 </div>

Upvotes: 0

Related Questions