|
测试
FF下测试
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
测试页面：
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下测试
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
测试页面：
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进一步决定显示次序。
出处：蓝色理想
责任编辑：moby
上一页 元素层叠级别及z-index剖析 [1 下一页 元素层叠级别及z-index剖析 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
第 1 页 
第 2 页 元素层叠级别及z-index剖析 [2]
