css z-index 在IE中的迷惑
2024-07-11 08:27:37
供稿：網(wǎng)友
z-index屬性簡(jiǎn)介
引用:
z-index : auto | number
auto：默認(rèn)值。
number：無(wú)單位的整數(shù)值，可為負(fù)數(shù)。
z-index 值較大的元素將疊加在z-index值較小的元素之上。對(duì)于未指定此屬性的定位對(duì)象，z-index 值為正數(shù)的對(duì)象會(huì)在其之上，而z-index 值為負(fù)數(shù)的對(duì)象在其之下。
注意：這個(gè)屬性不會(huì)作用于窗口控件，如selct 對(duì)象。在IE 5.5＋中，iframe 對(duì)象開(kāi)始支持此屬性。而在之前的瀏覽器版本中，iframe 對(duì)象是窗口控件，會(huì)忽略此屬性。
z-index屬性適用于定位元素（position 屬性值為 relative 或 absolute 或 fixed的對(duì)象），用來(lái)確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序（stack order）。
每一個(gè)定位元素都?xì)w屬于一個(gè)stacking context。根元素形成root stacking context，而其他的stacking context則由定位元素產(chǎn)生（此定位元素的z-index被定義一個(gè)非auto的z-index值），定位子元素會(huì)以這個(gè)local stacking context為參考，用相同的規(guī)則來(lái)決定層疊順序。并且stacking context和 containing block 之間并沒(méi)有必然聯(lián)系。
當(dāng)stacking context一樣的時(shí)候，就用z-index的值來(lái)決定怎樣顯示，如果z-index也相同（即stack level相同），則按照檔中后來(lái)者居上的原則（back-to-front ）的順序來(lái)層疊。
當(dāng)任何一個(gè)元素層疊另一個(gè)包含在不同stacking context元素時(shí)，則會(huì)以stacking context的層疊級(jí)別（stack level）來(lái)決定顯示的先后情況。也就是說(shuō)，在相同的stacking context下才會(huì)用z-index來(lái)決定先后，不同時(shí)則由stacking context的z-index來(lái)決定。例如：
定位元素A（z-index:100）里面有定位元素A1（z-index:300），而定位元素B和元素A兄弟關(guān)系（z-index:200）。你會(huì)發(fā)現(xiàn)無(wú)論A1的z-index是多大，也會(huì)被z-index是200的B所覆蓋，因?yàn)锳的z-index只有100。
IE中z-index BUG
首先先來(lái)看一個(gè)演示例子的代碼部分。
XHTML部分： <div id="container">
<div id="box1">這個(gè)box應(yīng)該在上面</div>
</div>
<div id="box2">這個(gè)box應(yīng)該在下面，IE瀏覽器會(huì)對(duì)定位元素產(chǎn)生一個(gè)新的stacking context ，甚至當(dāng)元素 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; }
兩個(gè)box被完全的定位，背景色為黃色的box1擁有z-index屬性值20，而背景色為綠色的box2擁有z-index屬性值10，唯一的區(qū)別在于背景色為黃色的box1被放在了一個(gè)定義了屬性position:relative的div中，并且在文檔源代碼中位前。
