Resume normal HTML flow after absolutely positioned div element - html

Question

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>

Answer 1

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>

Answer 2

#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>