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

2008-07-25 10:15:15　css,元素,z-index,叠级别 DesignTimes网页教程　网友评论条

一些问题的解释：

怿飞版主在《z-index在IE中的迷惑》一文中最后提到的问题：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Keywords" content="z-index,IE,迷惑" /><meta http-equiv="Description" content="这是一个z-index在IE中的迷惑的演示" /><meta content="all" name="robots" /><meta name="author" content="blank,怿飞" /><meta name="copyright" content="http://www.planabc.net" /><title>z-index在IE中的迷惑</title><style type="text/css" media="all">#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }</style></head><body><div [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]</span></p><p><span><strong>演示地址</strong>：<br></span><span>http://rong179.blogbus.com/files/12163573190.html</span><span></span></p><p><span>认为：<br><span class="code">解惑：IE浏览器似乎给body元素默认了一个相对定位属性（position: relative）。</span></span></p><p><span></span><span>真是这样吗？</span></p><p><span>运行代码框<br><span><textarea class="codeTextarea"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Keywords" content="z-index,IE,Firefox,stacking context,stack level" /><meta http-equiv="Description" content="这是一个在IE中测试层叠级别（stack level)的页面" /><meta content="all" name="robots" /><meta name="author" content="rong179，rong179@yahoo.cn" /><meta name="copyright" content="http://rong179.blogbus.com" /><title>body 是否默认有position属性</title><head><style>*{margin:0;}html{background:silver;}body{height:200px;width:200px;background:green;text-align:right;/*ie中position:relative;加上这条试试*//*ff中opacity:0.99;加上这条试试*/}div{position:absolute;left:100px;top:100px;width:200px;height:200px;background:yellow;z-index:-1;}</style></head><body> BODY:<br />z-Index:0 <div>DIV:<br />z-Index:-1</div></body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

演示地址：
http://rong179.blogbus.com/files/12163572440.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的大小进一步决定显示次序。