今天在写页面的时候发现头部导航栏的下拉菜单，被下面的画中画遮挡住了，然后把导航的下拉菜单样式设置为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 中会被遮挡住。
解决办法：在 head 样式中添加z-index:99; 终于在IE下显示为正常了，FF下也正常。
