Question

据我所知，作为百分比工作的高度，容器元素必须具有提到的特定高度。但是对于绝对定位的元素而言，这并不适用于祖先相对定位的情况。这是我的意思的一个实例：

＆＃13;

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

＆＃13;

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

＆＃13;

正如你所看到的那样，绝对放置的div在它上面应用了100％的高度而不是静态定位的div。为什么呢？

Answer 1

来自MDN

相对这个关键字列出了所有元素，就像元素没有定位一样，然后调整元素的位置，而不改变布局（因此为元素留下了一个间隙，如果它没有被定位）。 position：relative对表 - * - group，table-row，table-column，table-cell和table-caption元素的影响未定义。

为什么高度100％适用于绝对定位的元素？

2 个答案: