cssz-index在IE中的迷惑是什么?cssz-index在IE中的迷惑說明
下面我們在FF和IE中分別測試最終的效果，會發現FF中顯示的效果和上面分析的效果是完全一致的，而IE中的顯示卻不一致 。
【cssz-index在IE中的迷惑是什么?cssz-index在IE中的迷惑說明】迷惑：在IE的z-index屬性值10背景色為綠色的box卻在了z-index屬性值20的背景色為黃色的box1之上，和我們分析的結果完全不一致，為什么呢?
解惑：其實這是IE瀏覽器(windows)的一個BUG——在IE瀏覽器中，定位元素會產生一個新的stacking context，并且從z-index的值為0開始 。
現在讓我們來理解上面的演示在IE中的顯示邏輯 。設置了相對定位的container產生一個新的stacking context，所以其被定位的子元素背景色為黃色的box1以這個新的stacking context為參考來決定層疊順序 。而背景色為綠色的box2此時和背景色為黃色的box1的父元素container為同一個stacking context，所以他們之間按照z-index來決定層疊順序，即z-index屬性值10背景色為綠色的box2在z-index屬性值0的container之上 。
其實這個BUG的影響范圍很廣，只是大家平時不太注意 。下面來說明一個最常見的出現情況z-index的負值解析，很多朋友因為這個BUG的存在甚至武斷的認為IE支持z-index的負值，而FF不支持z-index的負值 。
舉個例子或許更能形象表達 。
XHTML部分：
為什么負值的定位元素在IE和FF下顯示不一致呢?Why?
CSS部分：
#container { position: relative; }
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }
大家會發現在FF下 ， 背景色為黃色的box1消失了，而IE下卻顯示 。這也是我上面所說的 ， 部分朋友武斷的認為IE支持z-index的負值，而FF不支持z-index的負值的原因 。我們要透過現象看本質 。
在上個例子中的分析，我們知道：設置了相對位置(position: relative)的元素但沒有給出非auto的z-index就不會產生stacking context，也就不會影響其子元素的層疊順序 。所以背景色為黃色的box1的stacking context為根元素產生的root stacking context 。在上一節中我們講到“對于未指定此屬性的定位對象，z-index 值為正數的對象會在其之上，而 z-index 值為負數的對象在其之下” ， 按照規則，應該是設定了z-index為-10的黃色的box1會顯示在于未指定z-index屬性的元素(比如body)之下 。所以在FF下背景色為黃色的box1消失了 。而在IE中設置了相對位置的 container會擁有z-index值0 ， 產生一個新的stacking context，背景色為黃色的box1在新的stacking context內層疊順序 ， 故在IE中會看到顯示 。
不過這里還有一個問題，對于上面的代碼，我們再精簡一下：
XHTML部分：
為什么負值的定位元素在IE和FF下顯示不一致呢?Why?
CSS部分：
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }
大家會發現和上面沒精簡的代碼顯示的結果是一致的 。但如果用上面的理解在IE下或許無法解釋通 。因為此時的理解背景色為黃色的box1的stacking context無論在FF下還是在IE下都是根元素產生的root stacking context 。
迷惑：那么在IE瀏覽器中，按照規則，背景色為黃色的box1也應該消失，然而卻沒有 。
解惑：IE瀏覽器似乎給body元素默認了一個相對定位屬性(position: relative) 。
