相対フローの親をドキュメントフローに保持するにはどうすればよいですか？

Question

私は2つのセクションを持っています。最初のセクションは相対的な位置を使用していて、子供がオーバーレイされている2つの絶対的な子を含んでいます。 2番目のセクションにはタイトルが含まれています。

2番目のセクションが下に表示されるように、1番目のセクションの相対的な位置を維持したいと考えています。ポジションアブソリュートはドキュメントフローの外にある要素を取ることを理解していますが、相対的な親であってもこの場合ですか？

どうすれば親を流し続けることができますか？

.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

あなたはただその子は場所を取ることができるように、親要素の大きさを設定する必要があります。絶対配置された子は通常のフローから外されるので、親divには何も含まれていないので、それは「消える」ことを意味します。すなわち：

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

とスニペット：

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

あなたは、通常のフローを終了していない親のdivが必要な場合は、それは静的である必要があります。

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