元素层叠级别及z-index剖析

真是这样吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> *{ margin:0; } html{ background:silver; } body{ height:200px; width:200px; background:#0F0; text-align:right; /*ie中position:relative;加上这条试试*/ /*ff中opacity:0.99;加上这条试试*/ } #box1{ position:absolute; left:100px; top:100px; width:200px; height:200px; background:#F00; z-index:-1; } </style> </head> <body> BODY:z-Index:0 <div id=“box1”>DIV:z-Index:-1</div> </body> </html>
提示：您可以先修改部分代码再运行

分析：

box1显示在body的下方，根据上面的stack level规则，IE中，如果body默认了一个位置属性，即body是其父级stacking context，box1应显示在其上方，事实却不是这样。而且当我们给body加上position：relative以后，显示效果和stack level规则一致。所以body并没有默认位置属性。

那为什么负值的定位元素在IE和FF下显示不一致呢？

ie中根据stack level规则： z-index为负的定位元素的stack level比父级stacking context（此处是root stacking context）高，显示在其上方。故box1在ie中能显示。ff3.0和标准一致，也能显示。大家可以试一下。

ff2.0中由于那条特殊的stack level，即 z-index为负的定位元素的stack level比父级stacking context（此处是root stacking context）低，所以显示在root stacking context下方。故不能看见。

另外，上面的代码中加上opacity那条后，在ff2.0中即可显示了。这又是什么原因呢？

推测：在火狐中如果给元素设置opacity属性（1除外），即会产生新的stacking context。

上面加上opacity属性后在ff2.0中可显示box1在body下，ff3.0box1在body上，（可以根据上面的stack level规则自己分析）符合推测。
在w3c的说明中也证明这点

In future levels of CSS, other properties may
introduce stacking contexts, for example 'opacity'
[CSS3COLOR].

总结：

在一个stacking context中元素的z-轴显示顺序，由元素所处的stack level决定。对于同一stack level的定位元素由z-index的大小进一步决定显示次序。

ie中给元素设置position属性（static除外）可产生新的stacking context

ff中给元素设置opacity属性（1除外）可产生新的stacking context

除此之外（也许设置其他属性也会产生新的stacking context，但还不知道）只有定位元素设置了z-index(auto除外)才会产生新的stacking context，子元素将按照新的stacking context，定位。

动易雅虎

推荐阅读

元素层叠级别及z-index剖析

分析：

那为什么负值的定位元素在IE和FF下显示不一致呢？

推测：在火狐中如果给元素设置opacity属性（1除外），即会产生新的stacking context。

总结：

相关文章/讨论：

作者：rong179 发布时间：2008年11月05日点击数：【收藏】【打印文章】

查看本文的所有评论 >>网友评论