欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

relative absolute無法沖破的等級問題解決

 更新時間:2008年06月19日 20:43:25   作者:  
如果我我們設定LI為position:relative;設置span為position:absolute;那么我們會發(fā)現(xiàn)無論SPAN的z-index值設置得再高都將永遠在后面父級的下面。

補充:
       前些時間發(fā)表的《position:relative/absolute無法沖破的等級》一文,講了定位中的等級,這幾天再看的時候發(fā)現(xiàn)文中講得并不透徹,沒有直指關鍵。所以特別的在這里做出補充希望能把position中的等級講得更為清楚、明確一些。 

       我們都知道,position有四個不同的值,分別為:static | absolute | fixed | relative。在蘇昱的《CSS2中文手冊》中是這樣解釋的:static:無特殊定位,對象遵循HTML定位規(guī)則; absolute:將對象從文檔流中拖出,使用left,right,top,bottom等屬性進行絕對定位。而其層疊通過z-index屬性定義。此時對象不具有邊距,但仍有補白和邊框; relative:對象不可層疊,但將依據(jù)left,right,top,bottom等屬性在正常文檔流中偏移位置; fixed:IE5.5及NS6尚不支持此屬性。 

        但是要想改變對象的層疊位置需要的是另一個CSS屬性:z-index。但是這個z-index并非是無所不能的,他受到了HTML代碼等級的制約。z-index只能在同等級的HTML上體現(xiàn)他的作用。這里需要聲明的是z-index只有在對象的position值為relative/absolute時才可以使用。下面我們就舉些例子來解釋等級的特性: 
復制代碼 代碼如下:

<div id="box_1">  
<div id="a">這是第一個塊</div>  
<div id="b">這是第二個塊</div>  
</div> 

針對上面的這個HTML代碼我們還需要寫一段CSS來定義它:  
復制代碼 代碼如下:

#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的層疊等級是可以通過z-index來設定的。這是沒問的,那么什么樣的情況下就會出現(xiàn)問題呢?我們再看一個實例:
復制代碼 代碼如下:

<div id="box_1">  
<div id="a">這是第一個塊</div>  
</div>  
<div id="box_2">  
<div id="b">這是第二個塊</div>  
</div> 

根據(jù)這個結(jié)構再寫一個CSS,要注意這個CSS中的不同的地方: 
復制代碼 代碼如下:

#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;} 
       這時候我們看,不論#a設為多大的值,他都無法超過#b,所以說z-index是無法沖破HTML的等級的,他必需是要同等級的狀態(tài)下才可以發(fā)揮威力.那么如何解決這個問題呢?我可以反過來想,堂兄弟之間的順序不能被重組,何不把父輩的等級做一次重組呢?所以我們把#box_1的CSS中加入一個z-index:100; 在#box_2的CSS中加入z-index:1;這樣再看一下效果:
復制代碼 代碼如下:

#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;}

相關文章

最新評論