爲什麼身高100％適用於絕對定位的元素？

Question

就我所知的高度作爲百分比來說，容器元素必須具有特定的高度。但是，這並不適用於祖先相對定位的絕對定位元素。這裏是我的意思工作的例子：

.container { 
 
    width: 400px; 
 
    background: cyan; 
 
    text-align: right; 
 
    position: relative; 
 
    color: white; 
 
} 
 

 
.child { 
 
    width: 90%; 
 
    height: 100%; 
 
    background: blue; 
 
} 
 

 
.absolute { 
 
    position: absolute; 
 
} 
 

 
.second { 
 
    margin-top: 30px; 
 
}

<div class="container"> 
 
    <div class="child absolute">Absolute</div> 
 
    one <br> two <br> three <br> one <br> two <br> three <br> 
 
</div> 
 
<div class="container second"> 
 
    <div class="child">Static</div> 
 
    one <br> two <br> three <br> one <br> two <br> three <br> 
 
</div>

正如你所看到的完全置於DIV適用100％的高度上，但不是靜態定位的div。爲什麼？

Answer 1

從MDN

相對 此關鍵字勾畫出的所有元素，就好像元件未定位，並且然後調節元件的位置，而不改變佈局（並因此留下間隙的元件，其中它會一直沒有定位）。位置：相對於表的效果 - * - 組，錶行，表列，表格單元和表標題元素未定義。

Read more。非常好描述。

Answer 2

Here是關於不同位置類型的一個偉大的閱讀：

絕對是相對父元素，而不是受到其他因素，並從頁面的流量被刪除，即你可以看到列表一，二，三不受影響。

以.child指定的高度爲100％。