css z-index 在IE中的迷惑

2024-07-11 08:44:45

字體：大中小

來源：轉載

供稿：網友

z-index屬性簡介

引用:
z-index : auto | number

auto：默認值。
number：無單位的整數值，可為負數。

z-index 值較大的元素將疊加在z-index值較小的元素之上。對于未指定此屬性的定位對象，z-index 值為正數的對象會在其之上，而z-index 值為負數的對象在其之下。

注意：這個屬性不會作用于窗口控件，如selct 對象。在IE 5.5＋中，iframe 對象開始支持此屬性。而在之前的瀏覽器版本中，iframe 對象是窗口控件，會忽略此屬性。

z-index屬性適用于定位元素（position 屬性值為 relative 或 absolute 或 fixed的對象），用來確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序（stack order）。

每一個定位元素都歸屬于一個stacking context。根元素形成root stacking context，而其他的stacking context則由定位元素產生（此定位元素的z-index被定義一個非auto的z-index值），定位子元素會以這個local stacking context為參考，用相同的規則來決定層疊順序。并且stacking context和 containing block 之間并沒有必然聯系。

當stacking context一樣的時候，就用z-index的值來決定怎樣顯示，如果z-index也相同（即stack level相同），則按照檔中后來者居上的原則（back-to-front ）的順序來層疊。

當任何一個元素層疊另一個包含在不同stacking context元素時，則會以stacking context的層疊級別（stack level）來決定顯示的先后情況。也就是說，在相同的stacking context下才會用z-index來決定先后，不同時則由stacking context的z-index來決定。例如：
定位元素A（z-index:100）里面有定位元素A1（z-index:300），而定位元素B和元素A兄弟關系（z-index:200）。你會發現無論A1的z-index是多大，也會被z-index是200的B所覆蓋，因為A的z-index只有100。

IE中z-index BUG
首先先來看一個演示例子的代碼部分。
XHTML部分： <div id="container">
<div id="box1">這個box應該在上面</div>
</div>
<div id="box2">這個box應該在下面，IE瀏覽器會對定位元素產生一個新的stacking context ，甚至當元素 z-index的為“auto”。</div>
CSS部分：

#container { position: relative; }
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; }
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; }
兩個box被完全的定位，背景色為黃色的box1擁有z-index屬性值20，而背景色為綠色的box2擁有z-index屬性值10，唯一的區別在于背景色為黃色的box1被放在了一個定義了屬性position:relative的div中，并且在文檔源代碼中位前。

根據上述代碼以及z-index的屬性簡介，我們來分析上面代碼將會產生的效果位置。

CSS specification 中清楚的規定了除了根元素，只有定位元素的z-index被定義一個非auto的z-index值才能產生新的stacking context。而例子中被相對定位的元素并沒有定義z-index，即z-index為默認值auto。所以按理他不會影響子元素的層疊順序。即背景色為黃色的box1和背景色為綠色的box2的stacking context相同，即都為根元素產生的root stacking context。再根據規則中當stacking context一樣的時候，就用z-index的值來決定怎樣顯示的原理，則應該z-index屬性值20的背景色為黃色的box1在z-index屬性值10背景色為綠色的box2之上。

上一篇：css z-index 最大值

下一篇：CSS 代碼質量提高的10條實用技巧