今天在写页面的时候发现头部导航栏的下拉菜单，被下面的画中画遮挡住了，然后把导航的下拉菜单样式设置为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
