css z-index 在IE中的迷惑
发布时间：2009-05-29 20:57:30 作者：佚名 
我要评论
我要评论z-index属性简介
引用:
z-index : auto | number
auto：默认值。
number：无单位的整数值，可为负数。
z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而z-index 值为负数的对象在其之下。
下面我们在FF和IE中分别测试最终的效果，会发现FF中显示的效果和上面分析的效果是完全一致的，而IE中的显示却不一致。
迷惑：在IE的z-index属性值10背景色为绿色的box却在了z-index属性值20的背景色为黄色的box1之上，和我们分析的结果完全不一致，为什么呢？
解惑：其实这是IE浏览器（windows）的一个BUG——在IE浏览器中，定位元素会产生一个新的stacking context，并且从z-index的值为0开始。
现在让我们来理解上面的演示在IE中的显示逻辑。设置了相对定位的container产生一个新的stacking context，所以其被定位的子元素背景色为黄色的box1以这个新的stacking context为参考来决定层叠顺序。而背景色为绿色的box2此时和背景色为黄色的box1的父元素container为同一个stacking context，所以他们之间按照z-index来决定层叠顺序，即z-index属性值10背景色为绿色的box2在z-index属性值0的container之上。
其实这个BUG的影响范围很广，只是大家平时不太注意。下面来说明一个最常见的出现情况z-index的负值解析，很多朋友因为这个BUG的存在甚至武断的认为IE支持z-index的负值，而FF不支持z-index的负值。
举个例子或许更能形象表达。
XHTML部分：
<body>
<div id="container">
<div id="box1">为什么负值的定位元素在IE和FF下显示不一致呢？Why？</div>
</div>
</body>
CSS部分：
#container { position: relative; }
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }
大家会发现在FF下，背景色为黄色的box1消失了，而IE下却显示。这也是我上面所说的，部分朋友武断的认为IE支持z-index的负值，而FF不支持z-index的负值的原因。我们要透过现象看本质。
在上个例子中的分析，我们知道：设置了相对位置（position: relative）的元素但没有给出非auto的z-index就不会产生stacking context，也就不会影响其子元素的层叠顺序。所以背景色为黄色的box1的stacking context为根元素产生的root stacking context。在上一节中我们讲到“对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下”，按照规则，应该是设定了z-index为-10的黄色的box1会显示在于未指定z-index属性的元素（比如body）之下。所以在FF下背景色为黄色的box1消失了。而在IE中设置了相对位置的 container会拥有z-index值0，产生一个新的stacking context，背景色为黄色的box1在新的stacking context内层叠顺序，故在IE中会看到显示。
不过这里还有一个问题，对于上面的代码，我们再精简一下：
XHTML部分：
<body>
<div id="box1">为什么负值的定位元素在IE和FF下显示不一致呢？Why？</div>
</body>
CSS部分：
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }
大家会发现和上面没精简的代码显示的结果是一致的。但如果用上面的理解在IE下或许无法解释通。因为此时的理解背景色为黄色的box1的stacking context无论在FF下还是在IE下都是根元素产生的root stacking context。
迷惑：那么在IE浏览器中，按照规则，背景色为黄色的box1也应该消失，然而却没有。
解惑：IE浏览器似乎给body元素默认了一个相对定位属性（position: relative）。
相关文章
- z-index最大值,最小值以及同值时层的高低，做了个测试z-index的最大值,有几个结论如下2009-05-28
CSS教程:元素层叠级别及z-index-CSS教程-网页制作-网页教学网
原文：http://rong179.blogbus.com/logs/24966909.html 声明 定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。 平台：win/I2008-10-17- 设置z-index时必须要固定位置，这样设置它的值时才能奏效（例如 position:absolute;）下面是示例代码，在ff3.5.5和ie5.5~ie8.0RC1中通过，大家可以尝试着不固定其位置试试2009-11-26
CSS教程:网页布局定位及z-index解释-CSS教程-网页制作-网页教学网
声明 定位元素： position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。 平台：win/IE win/FF z-index 用来确定定位元素在垂直于显示屏2008-10-17- IE6/7对z-index的表现跟IE8及以上浏览器不一致。position值为非static时，如果不设置z-index属性，IE6/7下z-index默认为0，而IE8及以上浏览器z-index为auto，且zindex:auto2012-11-13
- 发现有时候真得多看看书,以前一直纳闷为什么有时候可以,有时候不可以,原来是这个原因.2011-03-23
- 写了个最简单的DEMO，演示了3个DIV互相遮盖的情况。记住：z-index要配合position属性才有效2012-02-25
- 可是真有些日子没有写DIV+CSS了，而且对IE6兼容性的坑碰到的还是不够多(以前做国外项目)，所以这次开发中不可避免的碰见了几个问题，尤其是在IE下的 z-index 问题很有意思2013-01-09
CSS元素的层叠与z-index设置-CSS教程-网页制作-网页教学网
我们在文章的更新中，特别注重对新手的辅导，但webjx.com面对的是广大的开发人员，大家可能会遇到各种各样的问题，有些问题很不常见，或者应用的很少，但我们依然有必2008-10-17- 在这篇文章里，我们会准确的说明究竟什么是Z-index，它为什么会这么不为人所了解，并一起讨论一些关于它的实际使用中的问题。我们同时会描述一些会遇到的浏览器间的差异，2014-10-22
最新评论