爲什麼這個絕對定位的元素遵循流程？

Question

我只是碰到一些莫名其妙絆倒：

.parent { 
 
    position:relative; 
 
    background:lime; 
 
    height: 100px; 
 
} 
 
.parent div { 
 
    position:absolute; 
 
    background-color: yellow; 
 
}

<div class="parent"> 
 
    Parent 
 
    <div id="test">Child</div> 
 
</div>

注意，黃色的「孩子」矩形詞「家長」的下方。爲什麼？我瞭解top和left的默認值的方式是0，因此元素應該將其自身定位在父級的左上角。實際上，如果我刪除文本Parent或將top: 0添加到子元素，則會發生這種情況。但爲什麼在這種情況下絕對定位的盒子會遵循流程？

Answer 1

啊，終於找到了我正在尋找的答案！由於@Cbroe指着我在正確的方向：

https://drafts.csswg.org/css21/visudet.html#abs-non-replaced-height

如果所有三個「頂」，「高度」和「底部」爲汽車，集「頂」以靜位置並在下面應用規則3。

Answer 2

當位置爲auto（這是默認值）時，絕對位置仍然錨定在其父元素的內容流中。如果您將子元素移動到父元素的開頭，則會看到您期望的內容（請參見下面的代碼片段）。您可以避免通過添加top: 0;和left: 0;

.parent { 
 
    position:relative; 
 
    background:lime; 
 
    height: 100px; 
 
} 
 
.parent div { 
 
    position:absolute; 
 
    background-color: yellow; 
 
}

<div class="parent"> 
 
    <div id="test">Child</div> 
 
    Parent 
 
</div>