今天在寫頁面的時候發現頭部導航欄的下拉菜單，被下面的畫中畫遮擋住了，然后把導航的下拉菜單樣式設置為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

?

?

?

?

?

z-index在IE中的迷惑