html - 为什么 height 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 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 .描述得非常好。