今天在寫頁面的時候發(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)原來又是IE的BUG。。。
解惑：
其實這是 IE 瀏覽器（windows）的一個 BUG ——在 IE 瀏覽器中，定位元素會產(chǎn)生一個新的 stacking context，并且從 z-index 的值為 0 開始。
CSS specification
中清楚的規(guī)定了除了根元素，只有定位元素的 z-index 被定義一個非 auto 的 z-index 值才能產(chǎn)生新的 stacking context。一般被相對定位的元素并沒有定義 z-index，即 z-index 為默認值 auto 。所以按理他不會影響子元素的層疊順序。而設(shè)置了相對定位的 head 產(chǎn)生一個新的 stacking context，所以其被定位的子元素 下拉菜單 以這個新的 stacking context 為參考來決定層疊順序。
其實IE這個BUG的影響范圍很廣，只是大家平時不太注意。下面來說明一個最常見的出現(xiàn)情況 z-index 的負值解析，很多朋友因為這個 BUG 的存在甚至武斷的認為 IE 支持 z-index 的負值，而FF不支持 z-index 的負值。
我們知道：設(shè)置了相對位置（position: relative）的元素但沒有給出非 auto 的 z-index 就不會產(chǎn)生 stacking context，也就不會影響其子元素的層疊順序。所以 下拉菜單 的 stacking context 為根元素產(chǎn)生的 root stacking context。“對于未指定此屬性的定位對象，z-index 值為正數(shù)的對象會在其之上，而 z-index 值為負數(shù)的對象在其之下”，按照規(guī)則，應(yīng)該是設(shè)定了 z-index 為-99的 畫中畫 會顯示在于未指定 z-index 屬性的元素（比如 body）之下。所以在FF下正常。而在IE中設(shè)置了相對位置的 head 會擁有 z-index 值0，產(chǎn)生一個新的 stacking context，下拉菜單 在新的 stacking context 內(nèi)層疊順序，故在 IE 中會被遮擋住。
?
z-index可以控制div的顯示層級，但是FF和IE對z-index的解析機制不一樣。
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下也正常。
其實當(dāng)時我也不是靠這文章說的方法解決的，只是讓我知道了原來這是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這樣寫的，必須要加個div或者<span>包起來。
?
?
?
?
http://www.w3.org/TR/CSS21/visuren.html#z-index
http://bbs.blueidea.com/thread-2872952-1-1.html
?
?
?
?
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
