为什么高度100％在绝对定位的元素上起作用？

Question

As far as I know for the height to work as percentage the container element must have a specific height mentioned. But this doesn't hold true for absolutely positioned element with the ancestor being relatively positioned. Here is a working example of what I meant:

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

As you can see the absolutely placed div applied 100% height onto it but not the statically positioned div. Why?

Answer 1

From MDN

relative This keyword lays out all elements as though the element were not positioned, and then adjusts the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

Read more . Is very nicely described.

Answer 2

Here is a great read about the different position types:

Absolute is relative to the parent element and is not affected by other elements and are removed from the flow of the page ie you can see the list with one, two, three unaffected.

It's height is 100% as .child specifies.