Comment conserver le parent positionné relatif dans le flux de documents?

Question

J'ai deux sections, la première section utilise la position relative et contient 2 enfants absolus à l'intérieur avec les enfants superposés. La 2ème section contient un titre.

Je voudrais conserver la 1ère section avec la position relative en débit donc la 2ème section apparaît ci-dessous. Je comprends que la position absolue prend des éléments en dehors du flux de documents mais est-ce le cas même avec un parent relatif?

Comment puis-je garder le parent dans le flux?

.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

Vous avez juste besoin de définir les dimensions de l'élément parent, de sorte que ses enfants puissent avoir lieu. Comme les enfants positionnés en absolu sont retirés du flux régulier, cela signifie que la div parente ne contient rien, donc elle "disparaît". À savoir:

.parent { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background-color: Wheat; 
} 

Et l'extrait:

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

Si vous avez besoin de la div mère de ne pas quitter le flux normal, alors il devrait être statique:

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