为何子元素在position:relative与absolute下高度不同？

本质是百分比高度的参考对象变了 #

1. 设置position:relative的情况 #

这时候div还在正常文档流里，它的百分比高度直接按父元素的实际高度计算。你的代码里父元素section明确写了height: 600px，所以70%就是 600×0.7=420px，和你看到的结果一致。

2. 设置position:absolute的情况 #

absolute定位的元素会脱离文档流，这时候它的百分比高度得找最近的、非static定位的祖先元素当参考。你的代码里section没设置定位（默认是static），所以div只能往上追溯，最终以body作为参考对象。

你的body设了height:100%，这个100%是相对于浏览器视口高度计算的。假设当前视口高度大概是748px，那70%就是 748×0.7≈524px，这就是你看到的结果。

想让absolute的div以section为高度参考？ #

给section加个position: relative就行，这样div就会以section的600px为基准计算高度，结果还是420px：

section {
  height: 600px;
  width: 600px;
  background-color: blueviolet;
  border: 2px solid black;
  opacity: 0.5;
  position: relative; /* 新增这行 */
}

内容的提问来源于stack exchange，提问作者AnveK