child 的 width % 的标准是多少 positioned: absolute

Question

据我所知，child的宽度百分比标准是parent的内容框（只有内容，没有填充或边距。）。因此，如果 parent 中有填充且 child 的宽度为 100%，则 child 的宽度小于 parents。但是，如果我将 child 定位为绝对值，将 parent 定位为相对值，那么 child 的宽度就等于 parent 的宽度，无论 [= 中的填充和边距如何27=]秒。像这样：

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

尽管 parent 的位置和相对位置 Child 完全依赖于 '.first'。这种情况下child的宽度标准是多少？

Answer 1

position:absolute的%标准是最近定位的祖先块，如果没有定位祖先块，它是相对于body元素的。在你的情况下，因为第一个是相对定位的，第二个将是相对于第一个的，如果你删除第一个的位置属性，第二个将相对于 body 定位。

你也可以检查这个 - https://www.w3schools.com/css/css_positioning.asp

Answer 2

此代码段显示了将第二个 div 设置为相对位置然后是绝对位置的结果。您可以看到绝对定位元素采用其父元素的宽度，包括填充。

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

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

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

<h2>The blue square has relative position</h2>
<div class="first">HI
  <div class="second relative">
    HELLO
  </div>
</div>
<h2>The blue square has absolute position</h2>
<div class="first">HI
  <div class="second absolute">
    HELLO
  </div>
</div>

原因似乎是：

when a box has position: absolute its containing box is the parent's padding box.

请参阅已接受的答案：Absolute positioning ignoring padding of parent 尽管我正在努力在实际的标准文档中找到对它的确切描述，但如果有人能指出主要参考资料就更好了。

更新：感谢指出这一点的 Temani Afif which has info. from an actual specification：

child 的 width % 的标准是多少 positioned: absolute

What's the standard of width % for child positioned: absolute

html

css

position

css-position

absolute