这是我所知道的:
<html>
<html>
是在任何HTML文档中创建的第一个堆栈上下文的根元素[由此,我希望任何z-index: -1
元素都位于文档中没有其他堆叠上下文起作用的文档中,<body>
之后(尽管在<html>
之前)。但是,以下示例在所有现代浏览器中进行了演示:http://jsfiddle.net/39q2u/
在第二个示例中,我进行了更深入的研究:http://jsfiddle.net/39q2u/1/
将background-color
添加到<html>
使渲染引擎意识到z-index: -1
元素确实应显示在<body>
的后面,由于<body>
也设置了background-color
,因此有效地使其不可见。
有趣的是,我尝试了其他一些CSS属性,但似乎没有一个具有相同的效果。
(该元素在IE 9中仍然可见。)]] >>
从background-color
中删除<body>
使z-index: -1
元素再次出现,证明它已隐藏在<body>
的后面。
我遇到的问题是如何理解这种行为:
<body>
是否要遵守其他规则?background-color
上设置<html>
才能使渲染引擎正常运行?这就是我所知道的:在HTML中,文档的根元素是,文档的根元素创建了一个堆栈上下文,因此是第一个堆栈上下文的根元素...
background-color
的默认html
为transparent
。因此,显示为z-index
为负的元素,因为您可以“通过” html
元素看到它们。 @thirtydot提供的链接指向正确的方向,尽管也许该链接:http://www.w3.org/TR/css3-background/#background-color可能更准确。
我不确定100%,但是我相信body标签始终遵循z-index,该索引相对于其他元素,以便在页面上订购多个元素时更容易。
实际上是您期望的工作,但背景属性除外