Document stacking context root element: 或?

问题描述 投票:4回答:3

这是我所知道的:

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

[由此,我希望任何z-index: -1元素都位于文档中没有其他堆叠上下文起作用的文档中,<body>之后(尽管在<html>之前)。但是,以下示例在所有现代浏览器中进行了演示:http://jsfiddle.net/39q2u/

在第二个示例中,我进行了更深入的研究:http://jsfiddle.net/39q2u/1/

  1. background-color添加到<html>使渲染引擎意识到z-index: -1元素确实应显示在<body>的后面,由于<body>也设置了background-color,因此有效地使其不可见。

    有趣的是,我尝试了其他一些CSS属性,但似乎没有一个具有相同的效果。

    (该元素在IE 9中仍然可见。)]] >>

  2. background-color中删除<body>使z-index: -1元素再次出现,证明它已隐藏在<body>的后面。

  3. 我遇到的问题是如何理解这种行为:

  • 关于堆叠上下文,<body>是否要遵守其他规则?
  • 为什么需要在background-color上设置<html>才能使渲染引擎正常运行?
  • 或者我只是在某处误解了什么?
  • 这就是我所知道的:在HTML中,文档的根元素是,文档的根元素创建了一个堆栈上下文,因此是第一个堆栈上下文的根元素...

html css z-index
3个回答
1
投票

background-color的默认htmltransparent。因此,显示为z-index为负的元素,因为您可以“通过” html元素看到它们。 @thirtydot提供的链接指向正确的方向,尽管也许该链接:http://www.w3.org/TR/css3-background/#background-color可能更准确。


0
投票

我不确定100%,但是我相信body标签始终遵循z-index,该索引相对于其他元素,以便在页面上订购多个元素时更容易。


0
投票

实际上是您期望的工作,但背景属性除外

© www.soinside.com 2019 - 2024. All rights reserved.