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

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>

如附件中所见snippet of the result, the outer div element's bg-color is not represented in the resulting page. Rather, the only color seen is the body's bg-color。我知道块元素的默认高度由其内容决定，因此看起来虽然内部 div 元素有文本内容，但内部 div （绝对定位）实际上不被视为外部 div 元素的一部分 - a.k.a，外部 div 没有内容。

这让我很吃惊，因为外部元素也是绝对定位的。据我所知，这将使外部 div 成为内部 div 的所有意图和目的的包含块（如 the spec - 10.1.4 中所定义），因此 "supply" 把里面的内容放到外面 div 然后拉伸。这表面上会导致显示外部 div 的 bg-color。

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

Answer 1

As far as I know, this would make the outer div the containing block for the inner div for all intents and purposes (as defined in the spec - 10.1.4),

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

and therefore "supply" the inner content to the outer div and stretch it. This would ostensibly result in the outer div's bg-color to show

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

从the specification您可以阅读：

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.

然后你可以阅读here如何计算绝对元素的宽度，你会考虑这个规则：

If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.

... then the width is shrink-to-fit. ...

然后您可以看到 shrink-to-fit 的详细信息，它类似于 inline-block、float 等，因为我们没有 in-flow内容，结果会像您注意到的那样为 0。

高度计算的逻辑相同。

基本上，包含块的定义和width/height的计算方式是两个不同的概念。包含块为元素定义了一种引用，以便放置它或计算其 width/height 但作为元素的包含块并不意味着 width/height 将不同于 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>

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

Is content in absolutely positioned children considered part of the nearest aboslutely positioned ancestor?

html

css

css-position