位置：首页>> 网络编程>> 网页设计>> 元素层叠级别及z-index剖析（2）

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

作者：rong179　来源：蓝色理想　发布时间：2008-07-22 12:03:00　

标签：z-index,css,浏览器,FF

测试

FF下测试

运行代码框

<!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=gb2312" /><meta name="Keywords" content="z-index,IE,Firefox,stacking context,stack level" /><meta http-equiv="Description" content="这是一个在火狐中测试层叠级别（stack level)的页面" /><meta content="all" name="robots" /><meta name="author" content="rong179，rong179@yahoo.cn" /><meta name="copyright" content="http://rong179.blogbus.com" /><title>stack level 在火狐中的测试</title><style type="text/css" media="all">#container {position:relative;left:100px;z-index:0;background: purple;width:500px;}#container div {height:200px;width:200px;}#box-p-zn { position:relative;z-index:-1;background-color:yellow; top:-25px;left:-30px;}#box-block {background-color: aliceblue;margin-top:-30px;margin-left:150px;}#box-float {float:left;margin:-50px 100px 0 0;background-color: red;}#box-inline {background-color: gray;display:inline;padding:50px 0;}#box-p-za { position: absolute; top:50px;left:50px; background-color: green;}#box-p-zp { position: relative;z-index:1;background-color: greenyellow;}</style></head><body><div id="container"> <div id="box-p-zp">这个box position:relative;z-index:1;定位元素z-index值为正 </div> <div id="box-p-za">这个box position:absolute;z-index:auto;定位元素z-index值auto</div> <div id="box-inline">这个box inline;<br />inline元素</div> <div id="box-float">这个box float; <br /><br /><br /><br /><br /><br />未定位的浮动元素</div> <div id="box-block">----这个box block;未定位的块级元素</div> <div id="box-p-zn">这个box z-index:-1;定位元素z-index值为负</div> <!- 调试之用 --></div></body></html>

测试页面：
http://rong179.blogbus.com/files/12163574750.html（请分别在FF3.0和FF2.0中打开）

代码说明：

由前所述，如果元素的stack level同级则后来居上；元素的stack level高，这无论代码在文档中位置如何都显示在上面，即使代码在最前面；如果元素的stack level低，无论代码位置如何都将显示在下面，即使代码在最后面。

我们就根据这一点，以“3.文本流中非定位的、block块级子元素”和“4.文本流中非定位的、float浮动子元素”为例，如果我把“float元素” 的代码写在“block元素”的前面，且实际显示为：“float元素”在“block元素”之上。即可证明："float元素”的stack level级别较“block元素”高。因为如果同级,或者“block元素”的stack level高都应是“block元素”显示在上。

根据以上，根据标准中的顺序，把stack level高的元素代码写在前面，stack level低的代码写在后面，如果显示结果是：代码在前面的元素显示在上方，即证明上面的stack level规则。

测试结果：

在FF3.0中结果和标准顺序一致。FF2.0中“z-index值为负值的定位元素”在父级stacking context的背景下面。（注意ff2.0的这个特殊性）

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=gb2312" /><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>stack level 在IE中的测试</title><style type="text/css" media="all">#container {position:relative;z-index:0;background: purple;width:400px;}#container div {height:200px;width:200px;}#box-p-zn { position:relative;z-index:-1;background-color:yellow; top:-95px;left:55px;}#box-block {background-color: aliceblue;margin-top:-170px;margin-left:30px;}#box-float {float:left;margin:-50px 0px 0 35px;background-color: red;}#box-inline {background-color: gray;display:inline;padding:50px 0;margin-left:-10px;}#box-p-za { position: absolute; top:50px;left:50px; background-color: green;}#box-p-zp { position: relative;background-color: greenyellow;z-index:1;}</style></head><body><div id="container"> <div id="box-p-zp">这个box position:relative;z-index:1; </div> <div id="box-p-za">这个box position:absolute;z-index:auto;</div> <div id="box-float">这个box float</div> <div id="box-block"><br /><br /><br /><br />这个box block</div>  <div id="box-inline">这个box inline;</div> <div id="box-p-zn"><br /><br /><br /><br /><br />这个box z-index:-1;</div> </div></body></html>

测试页面：
http://rong179.blogbus.com/files/12163574751.html(请在IE下浏览)

代码说明：

此代码也是根据上面的测试思想，但由于inline元素在ie中的特殊性，把inline的代码写在了后面，事实证明结论是正确的。对于“block元素”和“float元素”顺序大家可以交换顺序测试。

测试结论：

IE下（无论ie6.0或者ie7.0）“float元素”和“block元素”属同一stack level，而“inline元素”较其stack level低。

解释：

“float元素”，“z-index：auto的定位元素”仿佛产生了新的stacking context，但其真正能产生新的stacking context的后代任按其父级stacking context定位。（但IE中“z-index：auto的定位元素”
会拥有z-index值0，产生一个新的stacking context，并影响其子元素定位。这是IE一个BUG）
inline元素在FF中仿佛能产生新的stacking context，而在IE中则不能。

至此stack level规则内容已经完毕，现在应该能理解stack level和z-index的不同。stack level来决定这一个stacking context中各元素在z轴上的显示顺序，对于同一stack level的定位元素才由z-index进一步决定显示次序。

第一页上一页 1

3 下一页

投稿

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

猜你喜欢