如何在文檔流中保留相對定位的父級？

Question

我有兩個部分，第一部分是使用相對位置，幷包含2個絕對兒童與兒童覆蓋。第二部分包含一個標題。

我想保留第一部分的位置相對流動，所以第二部分出現在下面。我理解絕對位置在文檔流之外需要元素，但即使是相對父級，情況也是這樣嗎？

我該如何保持家長流動？

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