How to keep relative positioned parent in document flow? - html

Question

I have two sections, the 1st section is using position relative and contains 2 absolute children inside with the children being overlayed. The 2nd section contains a title.
I would like to keep the 1st section with position relative in flow so the 2nd section appears below. I understand position absolute takes elements outside of the document flow but is this the case even with a relative parent?
How can i keep the parent in flow?
.parent {
position: relative;
}
.child {
color: white;
position: absolute;
width: 100%;
}
.child1 {
background-color: red;
z-index: 1;
}
.child2 {
background-color: blue;
z-index: 0;
}
<div class="parent">
<div class="child child1">block1</div>
<div class="child child2">block2</div>
</div>
<div class="text">
<h1>block below</h1>
</div>

Answer 1

You just need to set the parent element dimensions, so its children can take place. As the absolute-positioned children are taken off the regular flow, it means that the parent div doesn't contain anything, thus it "disappears". I.e.:
.parent {
position: relative;
width: 200px;
height: 200px;
background-color: Wheat;
}
And the snippet:
.parent {
position: relative;
width: 200px;
height: 200px;
background-color: Wheat;
}
.child {
color: white;
position: absolute;
width: 100%;
}
.child1 {
background-color: red;
z-index: 1;
}
.child2 {
background-color: blue;
z-index: 0;
}
<div class="parent">
<div class="child child1">block1</div>
<div class="child child2">block2</div>
</div>
<div class="text">
<h1>block below</h1>
</div>
If you need the parent div not to exit the normal flow, then it should be static:
.child {
color: white;
position: relative;
width: 100%;
}
.child1 {
background-color: red;
z-index: 1;
position: absolute;
}
.child2 {
background-color: blue;
z-index: 0;
}
<div class="parent">
<div class="child child1">block1</div>
<div class="child child2">block2</div>
</div>
<div class="text">
<h1>block below</h1>
</div>