|
小毅的blog：http://andymao.com/andy/
注：本文實(shí)例在IE5.x下可能會(huì)顯示不出來(lái)，請(qǐng)使用IE6、IE7、Firefox、Opera等瀏覽器來(lái)調(diào)試！
前段時(shí)間記得好像是誰(shuí)在群里提出了一個(gè)實(shí)在是讓大家都覺(jué)得很不理解的一個(gè)問(wèn)題：
<ul>
<li>第一塊</li>
<li><span>第二塊</span></li>
<li>第三塊</li>
<li>第四塊</li>
<li>第五塊</li>
</ul>
如果我我們?cè)O(shè)定LI為position:relative;設(shè)置span為position:absolute;那么我們會(huì)發(fā)現(xiàn)無(wú)論SPAN的z-index值設(shè)置得再高都將永遠(yuǎn)在后面父級(jí)的下面。
*{margin:0; padding:0; list-style:none;}
li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;}
li span {width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
試一下很容易發(fā)現(xiàn)我們的子級(jí)，z-index的值達(dá)到了1000的被設(shè)定了position:absolut;子級(jí)都被檔在了父級(jí)的下面。我想了很久，我覺(jué)得其根本問(wèn)題是：設(shè)置同樣的position:relative/absolute;同級(jí)標(biāo)簽之間的等級(jí)是無(wú)法用z-index超越的。我們上面的例子中的第一個(gè)LI的等級(jí)永遠(yuǎn)都要小于后一個(gè)LI的等級(jí)，所以我們?cè)贚I里的子級(jí)身上設(shè)置了position:absolute;，給了非常高的z-index值。
也許你會(huì)這樣來(lái)想：只要針對(duì)有span的LI設(shè)置position:relative;不就好了嗎？非常正確。當(dāng)其它的LI都不設(shè)置position:relative;那么我們需要的那個(gè)子級(jí)就可以浮在所有的內(nèi)容之上。但是如果實(shí)際上，所有的LI中都要有span，并且屬性都需要一樣怎么辦？當(dāng)然我們不大會(huì)需要有這樣的效果。但是我們需要有這樣的效果：子級(jí)全部是隱藏的，當(dāng)有鼠標(biāo)反應(yīng)時(shí)出現(xiàn)并且浮在所有的內(nèi)容之上。我們要知道，這確實(shí)是件讓人頭疼的事，因?yàn)槲覀兩厦嬉?jiàn)識(shí)到了，子級(jí)在顯示的時(shí)候都被壓在了下一個(gè)父級(jí)標(biāo)簽的下面。下面我們來(lái)實(shí)現(xiàn)一下這個(gè)鼠標(biāo)反應(yīng)的定位效果：
<ul>
<li><a href="" title=""><span>第一塊</span></a></li>
<li><a href="" title=""><span>第二塊</span></a></li>
<li><a href="" title=""><span>第三塊</span></a></li>
<li><a href="" title=""><span>第四塊</span></a></li>
<li><a href="" title=""><span>第五塊</span></a></li>
</ul>
我們通過(guò)鏈接的鼠標(biāo)事件來(lái)完成這個(gè)顯示隱藏效果：
*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
li a {position:relative; z-index:1; display:block; height:100px; width:100px; background:#000;}
li a:hover {background:#000000;}
li span {display:none;}
li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000; }
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
我們?cè)O(shè)定了a為position:relative;這樣他的子級(jí)就會(huì)根據(jù)父級(jí)的左上角為坐標(biāo)原點(diǎn)進(jìn)行定位了。然后我們?cè)O(shè)定span的具體形狀以及定位屬性，然后把他隱藏了。我們?cè)偻ㄟ^(guò)A的偽類(lèi):hover使得span被激活。我們看一下結(jié)果，我們會(huì)發(fā)現(xiàn)，所有應(yīng)該在上面的現(xiàn)在全在下面了。那我們?cè)趺唇鉀Q這個(gè)難題呢，其實(shí)以CSS想強(qiáng)行突破是不太可能，所以我們反過(guò)來(lái)想，能不能讓這個(gè)沒(méi)有被觸發(fā)的父級(jí)標(biāo)簽沒(méi)有position:relative;屬性，而只是觸發(fā)的時(shí)候才有級(jí)這個(gè)父級(jí)賦上這樣的值？其實(shí)想到這里基本上已經(jīng)可以解決所有的問(wèn)題了：
*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
li a {display:block; height:100px; width:100px; background:#000;}
li a:hover {position:relative; z-index:1; }
li span {display:none;}
li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
我們只要針對(duì)a:hover來(lái)設(shè)定其屬性為position:relative;就可以了，這樣只有在鼠標(biāo)觸發(fā)的時(shí)候A才會(huì)被賦于一個(gè)相對(duì)定位的屬性。這樣就完成可以解決被其它父級(jí)標(biāo)簽所擋的尷尬了。
當(dāng)然如果不介意IE6或是IE5.X這樣的瀏覽器我們還可以把代碼再做簡(jiǎn)化：
<ul>
<li><span>第一塊</span></li>
<li><span>第二塊</span></li>
<li><span>第三塊</span></li>
<li><span>第四塊</span></li>
<li><span>第五塊</span></li>
</ul>
CSS可以改成這樣：
*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px; background:#000;}
li:hover {position:relative; z-index:1;}
li span {display:none;}
li:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2720856-1-3.html
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁(yè) 下一頁(yè) position:relative/absolute無(wú)法沖破的等級(jí) [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁(yè) position:relative/absolute無(wú)法沖破的等級(jí) [1]
第 2 頁(yè) 
