为什么当我将 body 设置为 position: relative 时，我得到了意想不到的行为答案

【问题标题】：Why when I set the body to position: relative, I get unexpected behavior为什么当我将 body 设置为 position: relative 时，我得到了意想不到的行为
【发布时间】：2022-02-13 04:06:43
【问题描述】：

任何 CSS 大师都知道为什么会这样吗？或者可以解释一下吗？通过添加相对于主体的位置，将 p 提升为在 div 内部的行为。我知道position:static 默认情况下发生在正文中，但是当我将其设置为相对时，p 标签的行为就像它嵌套在 div 标签内一样。有谁知道为什么会发生这种行为？

body {
    background-color: purple;
    margin: 0px;
    padding: 0px;
    position: relative;


}

div {
    background-color: red;
    height: 100px;
    position: relative;
    margin:0px;
    padding: 0px;

}


p {
    background-color: blue;
    position: absolute;
    bottom: 0px;
    margin:0px;
}

<!DOCTYPE html>
<html>
  <body>
        <div>
        <!-- it behaves like if it was here -->
        </div>
        <p>Hello World</p>
  </body>
</html>

【问题讨论】：

position:relative 默认情况下不适用于任何元素。 static 甚至是 body 的默认值
对不起，我是这个意思。我更新了它

标签： html css document-body

【解决方案1】：

p 位于其containing block 的底部

如果元素具有“位置：绝对”，则包含块由最近的祖先建立，其“位置”为“绝对”、“相对”或“固定”，如下所示方式：

...

如果没有这样的祖先，则包含块是初始包含块。

而“初始包含块”是

根元素所在的包含块是一个称为初始包含块的矩形。对于连续媒体，它具有视口的尺寸并锚定在画布原点；它是分页媒体的页面区域。

所以没有position:relative 在body 上，元素被放置在屏幕的底部。 position:relative 在正文底部。

为 body 元素添加边框以查看其边界。由于另一个功能 background propagation

，着色让您感到困惑

body {
  background-color: purple;
  margin: 0px;
  padding: 0px;
  position: relative;
  border:2px solid green;
}

div {
  background-color: red;
  height: 100px;
  position: relative;
  margin: 0px;
  padding: 0px;
}

p {
  background-color: blue;
  position: absolute;
  bottom: 0px;
  margin: 0px;
}

<!DOCTYPE html>
<html>

<body>
  <div>
    <!-- it behaves like if it was here -->
  </div>
  <p>Hello World</p>
</body>

</html>

【讨论】：

好吧，我不知道。一旦我从 body 中删除 position: relative 并在 div 之间移动 P 标签，Hello World 将保持与现在相同的位置。这就是让我困惑的地方。