|
測(cè)試
FF下測(cè)試
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
測(cè)試頁(yè)面：
http://rong179.blogbus.com/files/12163574750.html（請(qǐng)分別在FF3.0和FF2.0中打開）
代碼說(shuō)明：
由前所述，如果元素的stack level同級(jí)則后來(lái)居上；元素的stack level高，這無(wú)論代碼在文檔中位置如何都顯示在上面，即使代碼在最前面；如果元素的stack level低，無(wú)論代碼位置如何都將顯示在下面，即使代碼在最后面。
我們就根據(jù)這一點(diǎn)，以“3.文本流中非定位的、block塊級(jí)子元素”和“4.文本流中非定位的、float浮動(dòng)子元素”為例，如果我把“float元素” 的代碼寫在“block元素”的前面，且實(shí)際顯示為：“float元素”在“block元素”之上。即可證明："float元素”的stack level級(jí)別較“block元素”高。因?yàn)槿绻?jí),或者“block元素”的stack level高都應(yīng)是“block元素”顯示在上。
根據(jù)以上，根據(jù)標(biāo)準(zhǔn)中的順序，把stack level高的元素代碼寫在前面，stack level低的代碼寫在后面，如果顯示結(jié)果是：代碼在前面的元素顯示在上方 ，即證明上面的stack level規(guī)則。
測(cè)試結(jié)果：
在FF3.0中結(jié)果和標(biāo)準(zhǔn)順序一致。FF2.0中“z-index值為負(fù)值的定位元素”在父級(jí)stacking context的背景下面。（注意ff2.0的這個(gè)特殊性）
IE下測(cè)試
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
測(cè)試頁(yè)面：
http://rong179.blogbus.com/files/12163574751.html(請(qǐng)?jiān)贗E下瀏覽)
代碼說(shuō)明：
此代碼也是根據(jù)上面的測(cè)試思想，但由于inline元素在ie中的特殊性，把inline的代碼寫在了后面，事實(shí)證明結(jié)論是正確的。對(duì)于“block元素”和“float元素”順序大家可以交換順序測(cè)試。
測(cè)試結(jié)論：
IE下（無(wú)論ie6.0或者ie7.0）“float元素”和“block元素”屬同一stack level，而“inline元素”較其stack level低。
解釋：
“float元素”，“z-index：auto的定位元素”仿佛產(chǎn)生了新的stacking context，但其真正能產(chǎn)生新的stacking context的后代任按其父級(jí)stacking context定位。（但I(xiàn)E中“z-index：auto的定位元素”
會(huì)擁有z-index值0，產(chǎn)生一個(gè)新的stacking context，并影響其子元素定位。這是IE一個(gè)BUG）
inline元素在FF中仿佛能產(chǎn)生新的stacking context，而在IE中則不能。
至此stack level規(guī)則內(nèi)容已經(jīng)完畢，現(xiàn)在應(yīng)該能理解stack level和z-index的不同。stack level來(lái)決定這一個(gè)stacking context中各元素在z軸上的顯示順序，對(duì)于同一stack level的定位元素才由z-index進(jìn)一步?jīng)Q定顯示次序。
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁(yè) 元素層疊級(jí)別及z-index剖析 [1 下一頁(yè) 元素層疊級(jí)別及z-index剖析 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 元素層疊級(jí)別及z-index剖析 [2]
