position:relative/absolute無法沖破的等級
更新時間：2007年03月09日 00:00:00 作者：
注：本文實例在IE5.x下可能會顯示不出來，請使用IE6、IE7、Firefox、Opera等瀏覽器來調(diào)試！
前段時間記得好像是誰在群里提出了一個實在是讓大家都覺得很不理解的一個問題：
<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è)置得再高都將永遠在后面父級的下面。
*{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;}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行] 提示：您可以先修改部分代碼再運行
試一下很容易發(fā)現(xiàn)我們的子級，z-index的值達到了1000的被設(shè)定了position:absolut;子級都被檔在了父級的下面。我想了很久，我覺得其根本問題是：設(shè)置同樣的position:relative/absolute;同級標(biāo)簽之間的等級是無法用z-index超越的。我們上面的例子中的第一個LI的等級永遠都要小于后一個LI的等級，所以我們在LI里的子級身上設(shè)置了position:absolute;，給了非常高的z-index值。
也許你會這樣來想：只要針對有span的LI設(shè)置position:relative;不就好了嗎？非常正確。當(dāng)其它的LI都不設(shè)置position:relative;那么我們需要的那個子級就可以浮在所有的內(nèi)容之上。但是如果實際上，所有的LI中都要有span，并且屬性都需要一樣怎么辦？當(dāng)然我們不大會需要有這樣的效果。但是我們需要有這樣的效果：子級全部是隱藏的，當(dāng)有鼠標(biāo)反應(yīng)時出現(xiàn)并且浮在所有的內(nèi)容之上。我們要知道，這確實是件讓人頭疼的事，因為我們上面見識到了，子級在顯示的時候都被壓在了下一個父級標(biāo)簽的下面。下面我們來實現(xiàn)一下這個鼠標(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>
我們通過鏈接的鼠標(biāo)事件來完成這個顯示隱藏效果：
*{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; }
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行] 提示：您可以先修改部分代碼再運行
我們設(shè)定了a為position:relative;這樣他的子級就會根據(jù)父級的左上角為坐標(biāo)原點進行定位了。然后我們設(shè)定span的具體形狀以及定位屬性，然后把他隱藏了。我們再通過A的偽類:hover使得span被激活。我們看一下結(jié)果，我們會發(fā)現(xiàn)，所有應(yīng)該在上面的現(xiàn)在全在下面了。那我們怎么解決這個難題呢，其實以CSS想強行突破是不太可能，所以我們反過來想，能不能讓這個沒有被觸發(fā)的父級標(biāo)簽沒有position:relative;屬性，而只是觸發(fā)的時候才有級這個父級賦上這樣的值？其實想到這里基本上已經(jīng)可以解決所有的問題了：
*{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; }
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行] 提示：您可以先修改部分代碼再運行
我們只要針對a:hover來設(shè)定其屬性為position:relative;就可以了，這樣只有在鼠標(biāo)觸發(fā)的時候A才會被賦于一個相對定位的屬性。這樣就完成可以解決被其它父級標(biāo)簽所擋的尷尬了。
當(dāng)然如果不介意IE6或是IE5.X這樣的瀏覽器我們還可以把代碼再做簡化：
<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; }
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行] 提示：您可以先修改部分代碼再運行
原始閱讀：
http://andymao.com/andy/post/67.html
前段時間記得好像是誰在群里提出了一個實在是讓大家都覺得很不理解的一個問題：
復(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è)置得再高都將永遠在后面父級的下面。
復(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:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
試一下很容易發(fā)現(xiàn)我們的子級，z-index的值達到了1000的被設(shè)定了position:absolut;子級都被檔在了父級的下面。我想了很久，我覺得其根本問題是：設(shè)置同樣的position:relative/absolute;同級標(biāo)簽之間的等級是無法用z-index超越的。我們上面的例子中的第一個LI的等級永遠都要小于后一個LI的等級，所以我們在LI里的子級身上設(shè)置了position:absolute;，給了非常高的z-index值。
也許你會這樣來想：只要針對有span的LI設(shè)置position:relative;不就好了嗎？非常正確。當(dāng)其它的LI都不設(shè)置position:relative;那么我們需要的那個子級就可以浮在所有的內(nèi)容之上。但是如果實際上，所有的LI中都要有span，并且屬性都需要一樣怎么辦？當(dāng)然我們不大會需要有這樣的效果。但是我們需要有這樣的效果：子級全部是隱藏的，當(dāng)有鼠標(biāo)反應(yīng)時出現(xiàn)并且浮在所有的內(nèi)容之上。我們要知道，這確實是件讓人頭疼的事，因為我們上面見識到了，子級在顯示的時候都被壓在了下一個父級標(biāo)簽的下面。下面我們來實現(xiàn)一下這個鼠標(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)事件來完成這個顯示隱藏效果：
復(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; }
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
我們設(shè)定了a為position:relative;這樣他的子級就會根據(jù)父級的左上角為坐標(biāo)原點進行定位了。然后我們設(shè)定span的具體形狀以及定位屬性，然后把他隱藏了。我們再通過A的偽類:hover使得span被激活。我們看一下結(jié)果，我們會發(fā)現(xiàn)，所有應(yīng)該在上面的現(xiàn)在全在下面了。那我們怎么解決這個難題呢，其實以CSS想強行突破是不太可能，所以我們反過來想，能不能讓這個沒有被觸發(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; }
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
我們只要針對a:hover來設(shè)定其屬性為position:relative;就可以了，這樣只有在鼠標(biāo)觸發(fā)的時候A才會被賦于一個相對定位的屬性。這樣就完成可以解決被其它父級標(biāo)簽所擋的尷尬了。
當(dāng)然如果不介意IE6或是IE5.X這樣的瀏覽器我們還可以把代碼再做簡化：
復(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; }
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
原始閱讀：
http://andymao.com/andy/post/67.html
相關(guān)文章
用純CSS+DIV寫的漂亮Flash幻燈片及SQL標(biāo)簽教程！
用純CSS+DIV寫的漂亮Flash幻燈片及SQL標(biāo)簽教程！...2007-05-05
使用純CSS實現(xiàn)未知尺寸的圖片(但高寬都小于200px)在200px的正方形容器中水平和垂直居中2008-05-05
CSS2實現(xiàn)的隔行換色...2007-05-05
針對瀏覽器隱藏CSS之獨孤九劍...2007-03-03
采用XHTML和CSS設(shè)計可重用可換膚的WEB站點的方法
隨著XHTML的逐漸推廣流行，HTML 在許多場合已經(jīng)顯得過時。World Wide Web Consortium (W3C) 于 2000 年 6 月 26 日發(fā)布了 XHTML 的第一個版本作為推薦標(biāo)準(zhǔn)。2008-09-09
div css表單布局的五個小技巧可以幫助你更靈活的控制表單，使頁面更加滿意。2008-01-01
css 之 background-position-x...2007-08-08
js開發(fā)中的頁面、屏幕、瀏覽器的位置原理（高度寬度）說明講解（附圖）
前端js開發(fā)中我們常遇到對頁面、屏幕、瀏覽器寬高和位置的獲取問題，有時間查到了js的實現(xiàn)代碼，但是不知道為什么。本篇圖文并茂講解Web環(huán)境中屏幕、瀏覽器及頁面的高度、寬度信息。2023-02-02
徹底弄懂CSS盒子模式系列教程集合...2007-04-04
