|
一些問題的解釋：
懌飛版主在《z-index在IE中的迷惑》一文中最后提到的問題：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
演示地址：
http://rong179.blogbus.com/files/12163573190.html
認(rèn)為：
解惑：IE瀏覽器似乎給body元素默認(rèn)了一個(gè)相對定位屬性（position: relative）。
真是這樣嗎？
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
演示地址：
http://rong179.blogbus.com/files/12163572440.html
分析
box1顯示在body的下方，根據(jù)上面的stack level規(guī)則，IE中，如果body默認(rèn)了一個(gè)位置屬性，即body是其父級stacking context，box1應(yīng)顯示在其上方，事實(shí)卻不是這樣。而且當(dāng)我們給body加上position：relative以后，顯示效果和stack level規(guī)則一致。所以body并沒有默認(rèn)位置屬性。
那為什么負(fù)值的定位元素在IE和FF下顯示不一致呢？
ie 中根據(jù)stack level規(guī)則： z-index為負(fù)的定位元素的stack level比父級stacking context（此處是root stacking context）高，顯示在其上方。故box1在ie中能顯示。ff3.0和標(biāo)準(zhǔn)一致，也能顯示。大家可以試一下。
ff2.0 中由于那條特殊的stack level，即 z-index為負(fù)的定位元素的stack level比父級stacking context（此處是root stacking context）低，所以顯示在root stacking context下方。故不能看見。
另外，上面的代碼中加上opacity那條后，在ff2.0中即可顯示了。這又是什么原因呢？
推測：在火狐中如果給元素設(shè)置opacity屬性（1除外），即會產(chǎn)生新的stacking context。
上面加上opacity屬性后在ff2.0中可顯示box1在body下，ff3.0box1在body上，（可以根據(jù)上面的stack level規(guī)則自己分析）符合推測。
在w3c的說明中也證明這點(diǎn)
In future levels of CSS, other properties may
introduce stacking contexts, for example 'opacity'
[CSS3COLOR].
總結(jié)：
在一個(gè)stacking context中元素的z-軸顯示順序，由元素所處的 stack level 決定。對于同一stack level的定位元素由z-index的大小進(jìn)一步?jīng)Q定顯示次序。
- ie中給元素設(shè)置position屬性（static除外）可產(chǎn)生新的stacking context
- ff中給元素設(shè)置opacity屬性（1除外）可產(chǎn)生新的stacking context
除此之外（也許設(shè)置其他屬性也會產(chǎn)生新的stacking context，但還不知道）只有定位元素設(shè)置了z-index(auto除外)才會產(chǎn)生新的stacking context，子元素將按照新的stacking context，定位。
相關(guān)文章/討論：
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2872952-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2008/5975.asp 
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 元素層疊級別及z-index剖析 [2] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 元素層疊級別及z-index剖析 [3]
