relative absolute無(wú)法沖破的等級(jí)問(wèn)題解決第2/3頁(yè)
更新時(shí)間:2008年06月19日 20:43:25 作者:
如果我我們?cè)O(shè)定LI為position:relative;設(shè)置span為position:absolute;那么我們會(huì)發(fā)現(xiàn)無(wú)論SPAN的z-index值設(shè)置得再高都將永遠(yuǎn)在后面父級(jí)的下面。
我們?cè)O(shè)定了a為position:relative;這樣他的子級(jí)就會(huì)根據(jù)父級(jí)的左上角為坐標(biāo)原點(diǎn)進(jìn)行定位了。然后我們?cè)O(shè)定span的具體形狀以及定位屬性,然后把他隱藏了。我們?cè)偻ㄟ^(guò)A的偽類:hover使得span被激活。我們看一下結(jié)果,我們會(huì)發(fā)現(xiàn),所有應(yīng)該在上面的現(xiàn)在全在下面了。那我們?cè)趺唇鉀Q這個(gè)難題呢,其實(shí)以CSS想強(qiáng)行突破是不太可能,所以我們反過(guò)來(lái)想,能不能讓這個(gè)沒有被觸發(fā)的父級(jí)標(biāo)簽沒有position:relative;屬性,而只是觸發(fā)的時(shí)候才有級(jí)這個(gè)父級(jí)賦上這樣的值?其實(shí)想到這里基本上已經(jīng)可以解決所有的問(wèn)題了:
復(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; }
我們只要針對(duì)a:hover來(lái)設(shè)定其屬性為position:relative;就可以了,這樣只有在鼠標(biāo)觸發(fā)的時(shí)候A才會(huì)被賦于一個(gè)相對(duì)定位的屬性。這樣就完成可以解決被其它父級(jí)標(biāo)簽所擋的尷尬了。
當(dāng)然如果不介意IE5這樣的瀏覽器我們還可以把代碼再做簡(jiǎn)化:
復(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; }
您可能感興趣的文章:
- javascript css styleFloat和cssFloat
- javascript css float屬性的特殊寫法
- css 跨瀏覽器實(shí)現(xiàn)float:center
- CSS中Float(浮動(dòng))相關(guān)技巧文章
- javascript下操作css的float屬性的特殊寫法
- css position: absolute、relative詳解
- CSS定位中Positoin、absolute、Relative的一些研究
- Div CSS absolute與relative的區(qū)別小結(jié)
- position:relative/absolute無(wú)法沖破的等級(jí)
- 解決rs.absolutepage=-1的問(wèn)題
- 詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別
相關(guān)文章
教你如何用CSS來(lái)控制網(wǎng)頁(yè)字體的顯示樣式
教你如何用CSS來(lái)控制網(wǎng)頁(yè)字體的顯示樣式...2007-02-02非常不錯(cuò)的關(guān)于IE與FireFox的js和css幾處不同點(diǎn)[轉(zhuǎn)自星火燎原]
非常不錯(cuò)的關(guān)于IE與FireFox的js和css幾處不同點(diǎn)[轉(zhuǎn)自星火燎原]...2007-09-09