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

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

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

我們設(shè)定了a為position:relative;這樣他的子級就會根據(jù)父級的左上角為坐標(biāo)原點進(jìn)行定位了。然后我們設(shè)定span的具體形狀以及定位屬性,然后把他隱藏了。我們再通過A的偽類:hover使得span被激活。我們看一下結(jié)果,我們會發(fā)現(xiàn),所有應(yīng)該在上面的現(xiàn)在全在下面了。那我們怎么解決這個難題呢,其實以CSS想強(qiáng)行突破是不太可能,所以我們反過來想,能不能讓這個沒有被觸發(fā)的父級標(biāo)簽沒有position:relative;屬性,而只是觸發(fā)的時候才有級這個父級賦上這樣的值?其實想到這里基本上已經(jīng)可以解決所有的問題了: 
復(fù)制代碼 代碼如下:

*{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; }
  
       我們只要針對a:hover來設(shè)定其屬性為position:relative;就可以了,這樣只有在鼠標(biāo)觸發(fā)的時候A才會被賦于一個相對定位的屬性。這樣就完成可以解決被其它父級標(biāo)簽所擋的尷尬了。 

當(dāng)然如果不介意IE5這樣的瀏覽器我們還可以把代碼再做簡化: 
復(fù)制代碼 代碼如下:

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

CSS可以改成這樣:
復(fù)制代碼 代碼如下:

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

相關(guān)文章

最新評論