position: absolute的子元素宽度百分比取值的参考基准是什么

根据CSS 2.1及现行CSS标准的明确规则，绝对定位元素的百分比宽度/高度，取值基准是其包含块的padding box（即包含块的内容区+内边距总和，不含边框、外边距），这和常规流内子元素百分比宽度取父元素content box为基准的规则完全不同。

你给出的示例刚好可以验证这条规则：

• 父元素.first设置了width: 100px（仅content区宽度）、padding: 10%，padding的百分比取值基准是父元素自身的宽度，因此上下左右padding都是10px，最终父元素的padding box总宽度为 100px + 10px*2 = 120px
• 子元素.second为绝对定位，width: 100%对应的实际宽度就是父元素padding box的120px，和你观测到的子元素宽度等于父元素总宽度的现象一致。

额外补充说明 #

• 绝对定位元素的包含块判定规则：当父元素设置了position: relative/absolute/fixed/sticky任意非static定位时，该父元素的padding box就是子元素的包含块
• 就算你不给绝对定位子元素设置left/top偏移值，子元素默认会从父元素content区左上角开始渲染，但宽度计算规则依然按padding box执行，这也是你示例里蓝色半透子元素会覆盖到父元素padding区域的原因
• 父元素的box-sizing属性不会影响子元素的百分比宽度计算规则，子元素始终取父元素padding box作为基准。

你示例用到的代码参考：
HTML结构：

<div class="first">HI
  <div class="second">
    HELLO
  </div>
</div>

CSS代码：

.first{
  background-color: yellow;
  width:100px;
  height:100px;
  padding:10%;
  position:relative;
}
.second{
  background-color: blue;
  position:absolute;
  width: 100%;
  height:100%;
  opacity:40%;
}

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