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

相对 这个关键字布局所有元素，就好像元素没有定位一样，然后调整元素的位置，而不改变布局（因此在没有定位的元素上留下一个间隙）。 position:relative 对 table-*-group、table-row、table-column、table-cell 和 table-caption 元素的影响是不确定的。

Read more。描述得很好。

Answer 2

Here 是一本关于不同职位类型的好书：

Absolute 是相对于父元素而言的，不受其他元素影响，会从页面流中移除，即您可以看到一、二、三不受影响的列表。

它的高度是 .child 指定的 100%。