Question

以下是我所知道的：

在HTML中，文档的根元素为<html>
文档的根元素创建堆叠上下文，因此<html>是在任何HTML文档中创建的第一个堆叠上下文的根元素

据此，我希望任何z-index: -1元素都位于<body>后面（虽然在<html>前面），但文档中没有其他堆叠上下文发挥作用。但是，以下示例在所有现代浏览器中进行了另外说明：http://jsfiddle.net/39q2u/

我在第二个例子中挖了一点：http://jsfiddle.net/39q2u/1/

以某种方式向background-color添加<html>会使渲染引擎意识到z-index: -1元素应该确实显示在<body>后面，从而有效地使其隐藏{ {1}}也设置了<body>。

有趣的是，我尝试了其他几个CSS属性，但它们似乎都没有同样的效果。

（该元素在IE 9中仍然可见。）
从background-color移除background-color会使<body>元素再次显示，证明它隐藏在z-index: -1后面。

我遇到的问题是如何理解这种行为：

在堆叠上下文时，<body>是否需遵守其他规则？
为什么需要在<body>上设置background-color以使呈现引擎正常运行？
或者我只是在某个地方误解了什么？

Answer 1

background-color的默认html为transparent。因此，显示具有负z-index的元素，因为您可以看到它们＆＃34;通过＆＃34; html元素。 @thirtydot提供的链接指向了正确的方向，尽管可能是这个链接：http://www.w3.org/TR/css3-background/#background-color可能更为重要。

Answer 2

我不是100％肯定，但我相信body标签总是遵循z-index，它相对于其他元素，以便在页面上订购多个元素时更容易。

如果将属性应用于html，它会突然变为，并且表现得像任何其他元素一样，因此将其子元素标记用作页面上的元素。可以把它想象成你可以玩的玩具，然后是你无法触及的玩具。通过为html指定属性，您将无法达到的玩具带到距离。您允许网页使用，然后使用

这在我的头脑中是有道理的，但我从一个偏见的立场站起来，所以我希望这有帮助！

Answer 3

除了背景属性

之外，实际上您的期望与描述的一样

看看这个代码片段，可以证明Error: Invalid hook call. Hooks can only be called inside of the body of a function component元素位于负数整数之后的位置：

html{
    border: 20px solid green;
    width: 250px
}
body {
padding:0;
margin:0;
  width: 200px;
  border: 20px solid orange;
  overflow: hidden;
  background:red;
}
p {
    position: relative;
    z-index: -1;
    background: yellow;
}

所以我们现在可以从原因

中排除 <p>helllllllllllllllllllllllllllllllllllllllllllo</p>

，并且在z-index属性上看起来很奇怪我认为最好通过以下链接进行阅读：

https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

Giving background-color to body applying whole page. Why?

文档堆叠上下文根元素：或？

3 个答案: