今天在寫頁(yè)面的時(shí)候發(fā)現(xiàn)頭部導(dǎo)航欄的下拉菜單，被下面的畫中畫遮擋住了，然后把導(dǎo)航的下拉菜單樣式設(shè)置為z-index:999;但是在IE下沒起什么作用，而在FF下起作用了。然后又把畫中畫的樣式設(shè)置為 z-index:-99; 在IE下還是沒反映。囧。。。

?

IE下:???????????????????????????????? FF下:
???

?

?

然后在Google里搜索了一下z-index的相關(guān)屬性，找了半天找到一篇文章。才發(fā)現(xiàn)原來(lái)又是IE的BUG。。。
解惑： 其實(shí)這是 IE 瀏覽器（windows）的一個(gè) BUG ——在 IE 瀏覽器中，定位元素會(huì)產(chǎn)生一個(gè)新的 stacking context，并且從 z-index 的值為 0 開始。

CSS specification 中清楚的規(guī)定了除了根元素，只有定位元素的 z-index 被定義一個(gè)非 auto 的 z-index 值才能產(chǎn)生新的 stacking context。一般被相對(duì)定位的元素并沒有定義 z-index，即 z-index 為默認(rèn)值 auto 。所以按理他不會(huì)影響子元素的層疊順序。而設(shè)置了相對(duì)定位的 head 產(chǎn)生一個(gè)新的 stacking context，所以其被定位的子元素 下拉菜單 以這個(gè)新的 stacking context 為參考來(lái)決定層疊順序。

其實(shí)IE這個(gè)BUG的影響范圍很廣，只是大家平時(shí)不太注意。下面來(lái)說明一個(gè)最常見的出現(xiàn)情況 z-index 的負(fù)值解析，很多朋友因?yàn)檫@個(gè) BUG 的存在甚至武斷的認(rèn)為 IE 支持 z-index 的負(fù)值，而FF不支持 z-index 的負(fù)值。

我們知道：設(shè)置了相對(duì)位置（position: relative）的元素但沒有給出非 auto 的 z-index 就不會(huì)產(chǎn)生 stacking context，也就不會(huì)影響其子元素的層疊順序。所以 下拉菜單 的 stacking context 為根元素產(chǎn)生的 root stacking context。“對(duì)于未指定此屬性的定位對(duì)象，z-index 值為正數(shù)的對(duì)象會(huì)在其之上，而 z-index 值為負(fù)數(shù)的對(duì)象在其之下”，按照規(guī)則，應(yīng)該是設(shè)定了 z-index 為-99的 畫中畫 會(huì)顯示在于未指定 z-index 屬性的元素（比如 body）之下。所以在FF下正常。而在IE中設(shè)置了相對(duì)位置的 head 會(huì)擁有 z-index 值0，產(chǎn)生一個(gè)新的 stacking context，下拉菜單 在新的 stacking context 內(nèi)層疊順序，故在 IE 中會(huì)被遮擋住。

?

z-index可以控制div的顯示層級(jí)，但是FF和IE對(duì)z-index的解析機(jī)制不一樣。

FF中解析z-index，只要設(shè)置div的z-index屬性就可以控制了。

IE中解析z-index，不僅要設(shè)置div的z-index屬性，還必須設(shè)置div的父div的z-index屬性，這樣才可以控制。

?

解決辦法：在 head 樣式中添加z-index:99; 終于在IE下顯示為正常了，F(xiàn)F下也正常。

其實(shí)當(dāng)時(shí)我也不是靠這文章說的方法解決的，只是讓我知道了原來(lái)這是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>

關(guān)鍵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這樣寫的，必須要加個(gè)div或者<span>包起來(lái)。

?

?

?

閱讀更詳細(xì)的內(nèi)容：

?

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

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

?

?

?

?

?

z-index在IE中的迷惑