为何static父元素下的absolute子元素遵循父内边距且高度异常？

问题代码 #

body {
  border: 0.1em solid;
  height: 10px;
}

.parent {
  padding: 20px;
}

.child {
  position: absolute;
  border: 0.1rem solid;
  height: 100%;
}

<div class="parent">
  <div class="child"></div>
</div>

问题1：子元素高度为何超过10px？ #

position:absolute元素设置height:100%时，参考的不是body的高度，而是初始包含块的高度。初始包含块是浏览器视口大小的虚拟容器，不受body设置的height:10px限制——哪怕body只有10px高，初始包含块依然是整个浏览器窗口的高度。所以子元素的height:100%会被解析为视口高度，自然远大于10px。

如果想让子元素高度匹配body的10px，只需给body添加position:relative，让它成为子元素的定位上下文，此时子元素的height:100%就会参考body的高度：

body {
  border: 0.1em solid;
  height: 10px;
  position: relative; /* 添加这一行 */
}

问题2：子元素为何从left:20px、top:20px处起始？ #

当position:absolute元素没有显式设置left/top/right/bottom时，它的初始定位位置是它在正常文档流中原本的占位位置。在正常流里，parent有20px padding，子元素会从padding区域的左上角开始排列；设置absolute后，元素脱离了正常流，但初始坐标依然保留了这个占位位置，所以看起来像是跟着parent的padding走。

如果想让它定位到视口的左上角，只需显式设置坐标：

.child {
  position: absolute;
  border: 0.1rem solid;
  height: 100%;
  left: 0;
  top: 0; /* 添加这两个属性 */
}

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