相对定位父级下绝对定位子元素的宽度计算标准是什么？

绝对定位元素的宽度计算规则 #

这个差异是CSS规范中明确定义的不同定位模式下百分比宽度的计算基准差异：

• 常规流（position: static默认值）的子元素设置width: 100%时，百分比基准为父元素的内容盒（content-box），也就是父元素总宽度减去padding、border后的可用内容区域，所以父元素设置padding后，子元素宽度会小于父元素的总可视宽度。
• 绝对定位（position: absolute）的子元素设置width: 100%时，百分比基准为最近的非static定位父元素的填充盒（padding-box），也就是父元素的内容区宽度+左右padding的总和，不会减去padding值，所以视觉上子元素宽度和父元素的总可视宽度完全一致，甚至会覆盖父元素的padding区域。

对应示例的具体计算逻辑：

.first {
  background-color: yellow;
  width: 100px;
  height: 100px;
  padding: 10%;
  position: relative;
}

.second {
  background-color: blue;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 40%;
}

父元素.first的总可视宽度为100px + 左右padding总和，绝对定位的.second的100%宽度直接取这个总可视宽度值，所以会完全覆盖父元素的内容区和内边距区。

如果需要让绝对定位子元素和常规流子元素一样只占用父元素的内容区，可以给子元素添加和父元素padding等值的left、right、top、bottom属性，同时去掉宽高设置即可：

.second {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 10%;
  bottom: 10%;
  /* 无需额外设置width、height属性 */
}

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