z-index在IE中的迷惑

今天在写页面的时候发现头部导航栏的下拉菜单，被下面的画中画遮挡住了，然后把导航的下拉菜单样式设置为z-index:999;但是在IE下没起什么作用，而在FF下起作用了。然后又把画中画的样式设置为z-index:-99; 在IE下还是没反映。囧。。。

 

IE下:                                 FF下:
   

 

 

然后在Google里搜索了一下z-index的相关属性，找了半天找到一篇文章。才发现原来又是IE的BUG。。。
解惑： 其实这是 IE 浏览器（windows）的一个 BUG ——在 IE 浏览器中，定位元素会产生一个新的 stacking context，并且从 z-index 的值为 0 开始。

CSS specification 中清楚的规定了除了根元素，只有定位元素的 z-index 被定义一个非 auto 的 z-index 值才能产生新的 stacking context。一般被相对定位的元素并没有定义 z-index，即 z-index 为默认值 auto 。所以按理他不会影响子元素的层叠顺序。而设置了相对定位的 head 产生一个新的 stacking context，所以其被定位的子元素 下拉菜单 以这个新的 stacking context 为参考来决定层叠顺序。

其实IE这个BUG的影响范围很广，只是大家平时不太注意。下面来说明一个最常见的出现情况 z-index 的负值解析，很多朋友因为这个 BUG 的存在甚至武断的认为 IE 支持 z-index 的负值，而FF不支持 z-index 的负值。

我们知道：设置了相对位置（position: relative）的元素但没有给出非 auto 的 z-index 就不会产生 stacking context，也就不会影响其子元素的层叠顺序。所以 下拉菜单 的 stacking context 为根元素产生的 root stacking context。“对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下”，按照规则，应该是设定了 z-index 为-99的 画中画 会显示在于未指定 z-index 属性的元素（比如 body）之下。所以在FF下正常。而在IE中设置了相对位置的 head 会拥有 z-index 值0，产生一个新的 stacking context，下拉菜单 在新的 stacking context 内层叠顺序，故在 IE 中会被遮挡住。

 

z-index可以控制div的显示层级，但是FF和IE对z-index的解析机制不一样。

FF中解析z-index，只要设置div的z-index属性就可以控制了。

IE中解析z-index，不仅要设置div的z-index属性，还必须设置div的父div的z-index属性，这样才可以控制。

 

解决办法：在 head 样式中添加z-index:99; 终于在IE下显示为正常了，FF下也正常。

其实当时我也不是靠这文章说的方法解决的，只是让我知道了原来这是ie bug。

 

<div id=test1></div>

<div id=test2>
<div id=test3></div>
</div>

如果要让test3在test1的上面，那必须这样写

 

<div id=test style="positon:relative;z-index:1 ;"></div>
<div id=test2 style="position:relative;z-index:2 ">
<div id=test3 style="position:absolute; left:0;top:0;"></div>
</div>

关键z-index要写在父div ，

另外，td不能这样写

<td style="position:relative;z-index:2 ">
<div id=test3 style="position:absolute; left:0;top:0;"></div>
</td>

 

IE虽然支持，但FF不支持TD这样写的，必须要加个div或者<span>包起来。

 

 

 

阅读更详细的内容：

 

http://www.w3.org/TR/CSS21/visuren.html#z-index

http://bbs.blueidea.com/thread-2872952-1-1.html