今天在寫頁面的時候發現頭部導航欄的下拉列表，被下面的畫中畫遮擋住了，然後把導航的下拉列表樣式設定為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。
如果要讓test3在test1的上面，那必須這樣寫
關鍵z-index要寫在父div ，
另外，td不能這樣寫
ie雖然支援，但ff不支援td這樣寫的，必須要加個div或者包起來。
z index在IE中的迷惑
今天在寫頁面的時候發現頭部導航欄的下拉列表，被下面的畫中畫遮擋住了，然後把導航的下拉列表樣式設定為z index 999 但是在ie下沒起什麼作用，而在ff下起作用了。然後又把畫中畫的樣式設定為z index 99 在ie下還是沒反映。囧。ie下 ff下 然後在google裡搜尋了一下z index...
Z Index在IE中的迷惑
z index屬性簡介 引用 z index auto number auto 預設值。number 無單位的整數值，可為負數。z index 值較大的元素將疊加在z index值較小的元素之上。對於未指定此屬性的定位物件，z index 值為正數的物件會在其之上，而z index 值為負數的物件在...
在IE中的z index屬性
z index屬性簡介 引用 z index auto number auto 預設值。number 無單位的整數值，可為負數。z index 值較大的元素將疊加在z index值較小的元素之上。對於未指定此屬性的定位物件，z index 值為正數的物件會在其之上，而z index 值為負數的物件在...