relative absolute無(wú)法沖破的等級(jí)問(wèn)題解決第3/3頁(yè)
更新時(shí)間:2008年06月19日 20:43:25 作者:
如果我我們?cè)O(shè)定LI為position:relative;設(shè)置span為position:absolute;那么我們會(huì)發(fā)現(xiàn)無(wú)論SPAN的z-index值設(shè)置得再高都將永遠(yuǎn)在后面父級(jí)的下面。
補(bǔ)充:
前些時(shí)間發(fā)表的《position:relative/absolute無(wú)法沖破的等級(jí)》一文,講了定位中的等級(jí),這幾天再看的時(shí)候發(fā)現(xiàn)文中講得并不透徹,沒(méi)有直指關(guān)鍵。所以特別的在這里做出補(bǔ)充希望能把position中的等級(jí)講得更為清楚、明確一些。
我們都知道,position有四個(gè)不同的值,分別為:static | absolute | fixed | relative。在蘇昱的《CSS2中文手冊(cè)》中是這樣解釋的:static:無(wú)特殊定位,對(duì)象遵循HTML定位規(guī)則; absolute:將對(duì)象從文檔流中拖出,使用left,right,top,bottom等屬性進(jìn)行絕對(duì)定位。而其層疊通過(guò)z-index屬性定義。此時(shí)對(duì)象不具有邊距,但仍有補(bǔ)白和邊框; relative:對(duì)象不可層疊,但將依據(jù)left,right,top,bottom等屬性在正常文檔流中偏移位置; fixed:IE5.5及NS6尚不支持此屬性。
但是要想改變對(duì)象的層疊位置需要的是另一個(gè)CSS屬性:z-index。但是這個(gè)z-index并非是無(wú)所不能的,他受到了HTML代碼等級(jí)的制約。z-index只能在同等級(jí)的HTML上體現(xiàn)他的作用。這里需要聲明的是z-index只有在對(duì)象的position值為relative/absolute時(shí)才可以使用。下面我們就舉些例子來(lái)解釋等級(jí)的特性:
復(fù)制代碼 代碼如下:
<div id="box_1">
<div id="a">這是第一個(gè)塊</div>
<div id="b">這是第二個(gè)塊</div>
</div>
針對(duì)上面的這個(gè)HTML代碼我們還需要寫(xiě)一段CSS來(lái)定義它:
復(fù)制代碼 代碼如下:
#a,#b {position:absolute; width:300px; height:100px; }
#a {z-index:10; left:0; top:0; background:#000; }
#b {z-index:1; left:20px; top:20px; background:#c00; }
這是最普通的在這種情況下#a與#b的層疊等級(jí)是可以通過(guò)z-index來(lái)設(shè)定的。這是沒(méi)問(wèn)的,那么什么樣的情況下就會(huì)出現(xiàn)問(wèn)題呢?我們?cè)倏匆粋€(gè)實(shí)例:
復(fù)制代碼 代碼如下:
<div id="box_1">
<div id="a">這是第一個(gè)塊</div>
</div>
<div id="box_2">
<div id="b">這是第二個(gè)塊</div>
</div>
根據(jù)這個(gè)結(jié)構(gòu)再寫(xiě)一個(gè)CSS,要注意這個(gè)CSS中的不同的地方:
復(fù)制代碼 代碼如下:
#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
#a, #b {position:absolute; width:100px; height:300px; }
#a {background:#c00; z-index:100; }
#b {background:#0c0; z-index:1; left:50px;}
復(fù)制代碼 代碼如下:
#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
#box_1 {z-index:100;}
#box_2 {z-index:1;}
#a, #b {position:absolute; width:100px; height:300px; }
#a {background:#c00; }
#b {background:#0c0; left:50px;}
您可能感興趣的文章:
- javascript css styleFloat和cssFloat
- javascript css float屬性的特殊寫(xiě)法
- css 跨瀏覽器實(shí)現(xiàn)float:center
- CSS中Float(浮動(dòng))相關(guān)技巧文章
- javascript下操作css的float屬性的特殊寫(xiě)法
- css position: absolute、relative詳解
- CSS定位中Positoin、absolute、Relative的一些研究
- Div CSS absolute與relative的區(qū)別小結(jié)
- position:relative/absolute無(wú)法沖破的等級(jí)
- 解決rs.absolutepage=-1的問(wèn)題
- 詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別
相關(guān)文章
教你如何用CSS來(lái)控制網(wǎng)頁(yè)字體的顯示樣式
教你如何用CSS來(lái)控制網(wǎng)頁(yè)字體的顯示樣式...2007-02-02非常不錯(cuò)的關(guān)于IE與FireFox的js和css幾處不同點(diǎn)[轉(zhuǎn)自星火燎原]
非常不錯(cuò)的關(guān)于IE與FireFox的js和css幾處不同點(diǎn)[轉(zhuǎn)自星火燎原]...2007-09-09JAVASCRIPT IE 與 FF 中兼容寫(xiě)法記錄
下面是高手整理的一些javascript在ie和ff中的兼容寫(xiě)法2008-10-10