龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

CSS教程:IE中的z-index迷惑(2)

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
IE中z-index的BUG。首先看下面的代码: XHTML部分: divid="container" divid="box1"这个box应该在上面/div /div divid="box2"这个box应该在下面,IE浏览器会对定位元素产生一个新的stackingcontext,甚至当元
  IE中z-index的BUG。首先看下面的代码:
XHTML部分:
<div id="container">
 <div id="box1">这个box应该在上面</div>
</div>
<div id="box2">这个box应该在下面,IE浏览器会对定位元素产生一个新的stacking context ,甚至当元素 z-index的为“auto”。</div>
CSS部分:
#container { position: relative; }
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; }
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; }
  两个box被完全的定位,背景色为黄色的box1拥有z-index属性值20,而背景色为绿色的box2拥有z-index属性值10,唯一的区别在于背景色为黄色的box1被放在了一个定义了属性position:relative的div中,并且在文档源代码中位前。
  根据上述代码以及z-index的属性简介,我们来分析上面代码将会产生的效果位置。
  CSS specification 中清楚的规定了除了根元素,只有定位元素的z-index被定义一个非auto的z-index值才能产生新的stacking context。而例子中被相对定位的元素并没有定义z-index,即z-index为默认值auto。所以按理他不会影响子元素的层叠顺序。即背景色为黄色的box1和背景色为绿色的box2的stacking context相同,即都为根元素产生的root stacking context。再根据规则中当stacking context一样的时候,就用z-index的值来决定怎样显示的原理,则应该z-index属性值20的背景色为黄色的box1在z-index属性值10背景色为绿色的box2之上。
  下面我们在FF和IE中分别测试最终的效果,会发现FF中显示的效果和上面分析的效果是完全一致的,而IE中的显示却不一致。
  看下面的效果演示:
Source Code to Run [www.fun52.com]

z-index在IE中的迷惑
#container { position: relative; }
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; }
第 1 2 3 页
精彩图集

赞助商链接