绝对定位的孩子中的内容是否被视为最近的绝对定位祖先的一部分？

Question

考虑以下简单代码：

 body { background-color: #990e82; } #header { background-color: #579900; position: absolute; } #inside { position: absolute; top: 0; left: 0; }

 <body> <div id="header"> <div id="inside">hjhkjh</div> </div> </body>

正如可以在结果的附加片段中看到的那样，外部 div 元素的bg-color未在结果页面中表示。 相反，唯一看到的颜色是 body 的bg-color 。 我知道块元素的默认高度由其内容决定，因此看起来虽然内部 div 元素具有文本内容，但内部 div（绝对定位）实际上并不被视为外部 div 元素的一部分 - 也就是, 外层 div 没有内容。

这让我感到惊讶，因为外部元素也是绝对定位的。 据我所知，这将使外部 div 成为内部 div 的包含块，用于所有意图和目的（如规范- 10.1.4 中所定义），因此将内部内容“提供”到外部 div 并拉伸它。 这表面上会导致外部 div 的 bg-color 显示。

我很想澄清包含块与包含在所述块中的实际内容之间的关系。

Answer 1

据我所知，这将使外部 div 成为内部 div 的包含块，用于所有意图和目的（如规范 - 10.1.4 中所定义），

这是真的， inside的包含块是header

因此，将内部内容“提供”给外部 div 并对其进行拉伸。 这表面上会导致外部 div 的 bg-color 显示

inside也是 header 的内部内容，但它有position:absolute所以它不在流程中并且不会影响它包含块的布局。

从 规范中，您可以阅读：

在绝对定位模型中，一个盒子相对于它的包含块是显式偏移的。 它完全从正常流程中删除（它对以后的兄弟姐妹没有影响）。 一个绝对定位的盒子为正常流子和绝对（但不是固定）定位的后代建立一个新的包含块。 但是，绝对定位元素的内容不会围绕任何其他框流动。 它们可能会遮住另一个盒子的内容（或自己被遮住），这取决于重叠盒子的堆栈级别。

然后您可以在此处阅读如何为绝对元素计算宽度，您将考虑以下规则：

如果'left'、'width'和'right'这三个都是'auto'：首先将'margin-left'和'margin-right'的任何'auto'值设置为0。然后，如果'direction'建立静态位置包含块的元素的属性是“ltr”，将“左”设置为静态位置并应用下面的规则三； 否则，将“right”设置为静态位置并应用下面的规则一。

1. ...然后宽度是收缩到适合的。 ...

然后你可以看到shrink-to-fit的细节，它类似于inline-block、float等，因为我们没有流入内容，它会像你注意到的那样为0。

高度计算的逻辑相同。

---

基本上，包含块的定义和宽度/高度的计算方式是两个不同的概念。 包含块为元素定义了一种引用，以便放置它或计算其宽度/高度，但作为元素的包含块并不意味着宽度/高度将不同于 0。

这是另一个有趣的例子，我将内部元素设置为width:100%并且它等于0因为它的包含块的宽度等于0 （我们的计算参考）

 body { background-color: #990e82; } #header { background-color: #579900; position: absolute; } #inside { position: absolute; top: 0; left: 0; width: 100%; background: red; }

 <body> <div id="header"> <div id="inside">hjhkjh</div> </div> </body>