快捷導(dǎo)航

relative absolute無法沖破的等級問題解決第1/3頁

更新時(shí)間：2008年06月19日 20:43:25 作者：

如果我我們設(shè)定LI為position:relative;設(shè)置span為position:absolute;那么我們會發(fā)現(xiàn)無論SPAN的z-index值設(shè)置得再高都將永遠(yuǎn)在后面父級的下面。

前段時(shí)間記得好像是誰在群里提出了一個(gè)實(shí)在是讓大家都覺得很不理解的一個(gè)問題：

復(fù)制代碼代碼如下:

<ul>   
<li>第一塊</li>   
<li><span>第二塊</span></li>   
<li>第三塊</li>   
<li>第四塊</li>   
<li>第五塊</li>   
</ul> 

如果我我們設(shè)定LI為position:relative;設(shè)置span為position:absolute;那么我們會發(fā)現(xiàn)無論SPAN的z-index值設(shè)置得再高都將永遠(yuǎn)在后面父級的下面。

復(fù)制代碼代碼如下:

*{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:100px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}  

試一下很容易發(fā)現(xiàn)我們的子級，z-index的值達(dá)到了1000的被設(shè)定了position:absolut;子級都被檔在了父級的下面。我想了很久，我覺得其根本問題是：設(shè)置同樣的position:relative/absolute;同級標(biāo)簽之間的等級是無法用z-index超越的。我們上面的例子中的第一個(gè)LI的等級永遠(yuǎn)都要小于后一個(gè)LI的等級，所以我們在LI里的子級身上設(shè)置了position:absolute;，給了非常高的z-index值。

也許你會這樣來想：只要針對有span的LI設(shè)置position:relative;不就好了嗎？非常正確。當(dāng)其它的LI都不設(shè)置position:relative;那么我們需要的那個(gè)子級就可以浮在所有的內(nèi)容之上。但是如果實(shí)際上，所有的LI中都要有span，并且屬性都需要一樣怎么辦？當(dāng)然我們不大會需要有這樣的效果。但是我們需要有這樣的效果：子級全部是隱藏的，當(dāng)有鼠標(biāo)反應(yīng)時(shí)出現(xiàn)并且浮在所有的內(nèi)容之上。我們要知道，這確實(shí)是件讓人頭疼的事，因?yàn)槲覀兩厦嬉娮R到了，子級在顯示的時(shí)候都被壓在了下一個(gè)父級標(biāo)簽的下面。下面我們來實(shí)現(xiàn)一下這個(gè)鼠標(biāo)反應(yīng)的定位效果：

復(fù)制代碼代碼如下:

<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>  

我們通過鏈接的鼠標(biāo)事件來完成這個(gè)顯示隱藏效果：

復(fù)制代碼代碼如下:

*{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;} 

12 3 下一頁閱讀全文

您可能感興趣的文章: