為什么高度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

relative這個關鍵字對所有元素進行布局，就像未放置元素一樣，然后在不更改布局的情況下調整元素的位置（這樣就可以在沒有放置元素的情況下為元素留出空隙）。 position：相對於table-*-group，table-row，table-column，table-cell和table-caption元素的影響是不確定的。

閱讀更多 。 描述得很好。

Answer 2

這是有關不同頭寸類型的精彩讀物：

絕對相對於父元素，不受其他元素影響，並從頁面流中刪除，即您可以看到列表中的一，二，三不受影響。

如.child指定的，其高度為100％。