|
上一頁講了定位中的等級，這幾天再看的時(shí)候發(fā)現(xiàn)文中講得并不透徹，沒有直指關(guān)鍵。所以特別的在這里做出補(bǔ)充希望能把position中的等級講得更為清楚、明確一些。
我們都知道，position有四個(gè)不同的值，分別為：static | absolute | fixed | relative。在蘇昱的《CSS2中文手冊》中是這樣解釋的：static:無特殊定位，對象遵循HTML定位規(guī)則； absolute:將對象從文檔流中拖出，使用left，right，top，bottom等屬性進(jìn)行絕對定位。而其層疊通過z-index屬性定義。此時(shí)對象不具有邊距，但仍有補(bǔ)白和邊框； relative:對象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置； fixed:IE5.5及NS6尚不支持此屬性。
但是要想改變對象的層疊位置需要的是另一個(gè)CSS屬性：z-index。但是這個(gè)z-index并非是無所不能的，他受到了HTML代碼等級的制約。z-index只能在同等級的HTML上體現(xiàn)他的作用。這里需要聲明的是z-index只有在對象的position值為relative/absolute時(shí)才可以使用。下面我們就舉些例子來解釋等級的特性：
<div id="box_1">
<div id="a">這是第一個(gè)塊</div>
<div id="b">這是第二個(gè)塊</div>
</div>
針對上面的這個(gè)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; }
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
這是最普通的在這種情況下#a與#b的層疊等級是可以通過z-index來設(shè)定的。這是沒問的，那么什么樣的情況下就會出現(xiàn)問題呢？我們再看一個(gè)實(shí)例：
<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)再寫一個(gè)CSS,要注意這個(gè)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;}
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
這時(shí)候我們看,不論#a設(shè)為多大的值,他都無法超過#b,所以說z-index是無法沖破HTML的等級的,他必需是要同等級的狀態(tài)下才可以發(fā)揮威力.那么如何解決這個(gè)問題呢?我可以反過來想,堂兄弟之間的順序不能被重組,何不把父輩的等級做一次重組呢?所以我們把#box_1的CSS中加入一個(gè)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;}
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
這是指定父級重組了層疊的順序,如果要是沒有辦法一一指定父級的順序重組,那就要看看上一頁的內(nèi)容.但是也不是什么問題都能解決,但是看看也許能幫你想到更好的辦法!
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2725018-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2007/4521.asp 
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 position:relative/absolute無法沖破的等級 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 2 頁 position:relative/absolute無法沖破的等級 [2]
