CSS教程:網(wǎng)頁布局定位及z-index解釋
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:25:37 作者:佚名
我要評(píng)論

聲明
定位元素:
position屬性值設(shè)置除默認(rèn)值static以外的元素,包括relative,absolute,fixed。
平臺(tái):win/IE win/FF
z-index
用來確定定位元素在垂直于顯示屏方向(以下稱為Z軸)上的層疊順序
值:auto | 整數(shù) | inherit
默認(rèn):auto
適用于:定位元素
繼承性
聲明
定位元素:
position屬性值設(shè)置除默認(rèn)值static以外的元素,包括relative,absolute,fixed。
平臺(tái):win/IE win/FF
z-index
用來確定定位元素在垂直于顯示屏方向(以下稱為Z軸)上的層疊順序
值:auto | 整數(shù) | inherit
默認(rèn):auto
適用于:定位元素
繼承性:no
理解stacking context
每個(gè)box都?xì)w屬于一個(gè)stacking context,它是元素在z軸方向上定位的參考。根元素形成 root stacking context,其他stacking context由定位元素設(shè)置z-index為非auto時(shí)產(chǎn)生。如#div1{position:relative;z-index:0;}即可使 id=div1的元素產(chǎn)生stacking context。stacking context和 containing block 并沒有必然聯(lián)系。
理解stack level
在一個(gè)stacking context中的每個(gè)box,都有一個(gè)stack level(即層疊級(jí)別,以下統(tǒng)一用stack level),它決定著在同一stacking context中每個(gè)box在z軸上的顯示順序。同一stacking context中,stack level值大的顯示在上,stack level值小的顯示在下,同一stack level的遵循后來居上的原則(back-to-front )。不同stacking context中,元素顯示順序以父級(jí)的stacking context的stack level來決定顯示的先后情況。于自身stack level無關(guān)。注意stack level和z-index并不是統(tǒng)一概念。(將在后文慢慢理解)
stack level規(guī)則
每個(gè)stacking context中可包含塊級(jí)(block)元素、內(nèi)聯(lián)(行內(nèi)inline)元素,還有設(shè)置float屬性的元素、定位元素等等他們?cè)谕桓讣?jí) stacking context中的顯示順序是怎樣的?即stack level是怎樣的呢?比如一個(gè)塊級(jí)元素和內(nèi)聯(lián)元素發(fā)生層疊的話誰會(huì)在上面呢?是不是誰在后面誰就在上面呢?
根據(jù)w3c關(guān)于 stack level 的介紹可以得出以下stack level規(guī)則
每個(gè)stacking context都包括以下stack level (后來居上):
-
父級(jí)stacking context的背景、邊界
z-index值為負(fù)值的定位元素(值越小越在下)
文本流中非定位的、block塊級(jí)子元素
文本流中非定位的、float浮動(dòng)子元素
仿佛能產(chǎn)生stacking context的inline元素
否則,inline元素的stack level將在block元素之前。 z-index:auto/0的定位元素 z-index值為正的定位元素(值越大越在上)
以上stack level在瀏覽器執(zhí)行情況:
firefox3.0下測(cè)試完全吻合,firefox2.0下稍有不同即:“z-index值為負(fù)值的定位元素”在“父級(jí)stacking context的背景、邊界”之前。
ie6.0和7.0中:inline元素的stack level位于block元素之前,且“文本流中非定位的、float浮動(dòng)子元素”(以下簡(jiǎn)稱浮動(dòng)元素)和“文本流中非定位的、block塊級(jí)子元素”(以下簡(jiǎn)稱block元素)處于同一級(jí)。
#p#
測(cè)試
FF下測(cè)試
運(yùn)行代碼框
[Ctrl A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
測(cè)試頁面:
http://rong179.blogbus.com/files/12163574750.html(請(qǐng)分別在FF3.0和FF2.0中打開)
代碼說明:
由前所述,如果元素的stack level同級(jí)則后來居上;元素的stack level高,這無論代碼在文檔中位置如何都顯示在上面,即使代碼在最前面;如果元素的stack level低,無論代碼位置如何都將顯示在下面,即使代碼在最后面。
我們就根據(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é)果:
#p#
一些問題的解釋:
懌飛版主在《z-index在IE中的迷惑》一文中最后提到的問題:
運(yùn)行代碼框
[Ctrl A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
演示地址:
http://rong179.blogbus.com/files/12163573190.html
認(rèn)為:
解惑:IE瀏覽器似乎給body元素默認(rèn)了一個(gè)相對(duì)定位屬性(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是其父級(jí)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比父級(jí)stacking context(此處是root stacking context)高,顯示在其上方。故box1在ie中能顯示。ff3.0和標(biāo)準(zhǔn)一致,也能顯示。大家可以試一下。
ff2.0 中由于那條特殊的stack level,即 z-index為負(fù)的定位元素的stack level比父級(jí)stacking context(此處是root stacking context)低,所以顯示在root stacking context下方。故不能看見。
另外,上面的代碼中加上opacity那條后,在ff2.0中即可顯示了。這又是什么原因呢?
推測(cè):在火狐中如果給元素設(shè)置opacity屬性(1除外),即會(huì)產(chǎn)生新的stacking context。
上面加上opacity屬性后在ff2.0中可顯示box1在body下,ff3.0box1在body上,(可以根據(jù)上面的stack level規(guī)則自己分析)符合推測(cè)。
在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 決定。對(duì)于同一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è)置其他屬性也會(huì)產(chǎn)生新的stacking context,但還不知道)只有定位元素設(shè)置了z-index(auto除外)才會(huì)產(chǎn)生新的stacking context,子元素將按照新的stacking context,定位。
在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è)試頁面:
http://rong179.blogbus.com/files/12163574751.html(請(qǐng)?jiān)贗E下瀏覽)
代碼說明:
此代碼也是根據(jù)上面的測(cè)試思想,但由于inline元素在ie中的特殊性,把inline的代碼寫在了后面,事實(shí)證明結(jié)論是正確的。對(duì)于“block元素”和“float元素”順序大家可以交換順序測(cè)試。
測(cè)試結(jié)論:
IE下(無論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來決定這一個(gè)stacking context中各元素在z軸上的顯示順序,對(duì)于同一stack level的定位元素才由z-index進(jìn)一步?jīng)Q定顯示次序。
相關(guān)文章
- z-index最大值,最小值以及同值時(shí)層的高低,做了個(gè)測(cè)試z-index的最大值,有幾個(gè)結(jié)論如下2009-05-28
- z-index屬性簡(jiǎn)介 引用: z-index : auto | number auto:默認(rèn)值。 number:無單位的整數(shù)值,可為負(fù)數(shù)。 z-index 值較大的元素將疊加在z-index值較小的元素之上。對(duì)2009-05-29
CSS教程:元素層疊級(jí)別及z-index-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
原文:http://rong179.blogbus.com/logs/24966909.html 聲明 定位元素:position屬性值設(shè)置除默認(rèn)值static以外的元素,包括relative,absolute,fixed。 平臺(tái):win/I2008-10-17- 設(shè)置z-index時(shí)必須要固定位置,這樣設(shè)置它的值時(shí)才能奏效(例如 position:absolute;)下面是示例代碼,在ff3.5.5和ie5.5~ie8.0RC1中通過,大家可以嘗試著不固定其位置試試2009-11-26
- IE6/7對(duì)z-index的表現(xiàn)跟IE8及以上瀏覽器不一致。position值為非static時(shí),如果不設(shè)置z-index屬性,IE6/7下z-index默認(rèn)為0,而IE8及以上瀏覽器z-index為auto,且zindex:auto2012-11-13
一個(gè)關(guān)于CSS Z-index 的東東,解決了我很多疑問
發(fā)現(xiàn)有時(shí)候真得多看看書,以前一直納悶為什么有時(shí)候可以,有時(shí)候不可以,原來是這個(gè)原因.2011-03-23- 寫了個(gè)最簡(jiǎn)單的DEMO,演示了3個(gè)DIV互相遮蓋的情況。記?。簔-index要配合position屬性才有效2012-02-25
- 可是真有些日子沒有寫DIV+CSS了,而且對(duì)IE6兼容性的坑碰到的還是不夠多(以前做國外項(xiàng)目),所以這次開發(fā)中不可避免的碰見了幾個(gè)問題,尤其是在IE下的 z-index 問題很有意思2013-01-09
CSS元素的層疊與z-index設(shè)置-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
我們?cè)谖恼碌母轮?,特別注重對(duì)新手的輔導(dǎo),但webjx.com面對(duì)的是廣大的開發(fā)人員,大家可能會(huì)遇到各種各樣的問題,有些問題很不常見,或者應(yīng)用的很少,但我們依然有必2008-10-17- 在這篇文章里,我們會(huì)準(zhǔn)確的說明究竟什么是Z-index,它為什么會(huì)這么不為人所了解,并一起討論一些關(guān)于它的實(shí)際使用中的問題。我們同時(shí)會(huì)描述一些會(huì)遇到的瀏覽器間的差異,2014-10-22