|
演示地址：http://www.planabc.net/demo/z-index01.html 迷惑：在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; } 演示地址：http://www.planabc.net/demo/z-index02.html 大家会发现在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; } 演示地址：http://www.planabc.net/demo/z-index03.html 大家会发现和上面没精简的代码显示的结果是一致的。但如果用上面的理解在IE下或许无法解释通。因为此时的理解背景色为黄色的box1的stacking context无论在FF下还是在IE下都是根元素产生的root stacking context。 迷惑：那么在IE浏览器中，按照规则，背景色为黄色的box1也应该消失，然而却没有。 解惑：IE浏览器似乎给body元素默认了一个相对定位属性（position: relative）。 | 