前段時間記得好像是誰在群里提出了一個實在是讓大家都覺得很不理解的一個問題：
<ul> <li>第一塊</li> <li><span>第二塊</span></li> <li>第三塊</li> <li>第四塊</li> <li>第五塊</li> </ul>
如果我我們設定LI為position:relative;設置span為position:absolute;那么我們會發現無論SPAN的z-index值設置得再高都將永遠在后面父級的下面。
*{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;}試一下很容易發現我們的子級，z-index的值達到了1000的被設定了position:absolut;子級都被檔在了父級的下面。我想了很久，我覺得其根本問題是：設置同樣的position:relative/absolute;同級標簽之間的等級是無法用z-index超越的。我們上面的例子中的第一個LI的等級永遠都要小于后一個LI的等級，所以我們在LI里的子級身上設置了position:absolute;，給了非常高的z-index值。
也許你會這樣來想：只要針對有span的LI設置position:relative;不就好了嗎？非常正確。當其它的LI都不設置position:relative;那么我們需要的那個子級就可以浮在所有的內容之上。但是如果實際上，所有的LI中都要有span，并且屬性都需要一樣怎么辦？當然我們不大會需要有這樣的效果。但是我們需要有這樣的效果：子級全部是隱藏的，當有鼠標反應時出現并且浮在所有的內容之上。我們要知道，這確實是件讓人頭疼的事，因為我們上面見識到了，子級在顯示的時候都被壓在了下一個父級標簽的下面。下面我們來實現一下這個鼠標反應的定位效果：
<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>
我們通過鏈接的鼠標事件來完成這個顯示隱藏效果：
*{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;}我們設定了a為position:relative;這樣他的子級就會根據父級的左上角為坐標原點進行定位了。然后我們設定span的具體形狀以及定位屬性，然后把他隱藏了。我們再通過A的偽類:hover使得span被激活。我們看一下結果，我們會發現，所有應該在上面的現在全在下面了。那我們怎么解決這個難題呢，其實以CSS想強行突破是不太可能，所以我們反過來想，能不能讓這個沒有被觸發的父級標簽沒有position:relative;屬性，而只是觸發的時候才有級這個父級賦上這樣的值？其實想到這里基本上已經可以解決所有的問題了：
*{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來設定其屬性為position:relative;就可以了，這樣只有在鼠標觸發的時候A才會被賦于一個相對定位的屬性。這樣就完成可以解決被其它父級標簽所擋的尷尬了。
當然如果不介意IE5這樣的瀏覽器我們還可以把代碼再做簡化：
<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; }補充：
前些時間發表的《position:relative/absolute無法沖破的等級》一文，講了定位中的等級，這幾天再看的時候發現文中講得并不透徹，沒有直指關鍵。所以特別的在這里做出補充希望能把position中的等級講得更為清楚、明確一些。
我們都知道，position有四個不同的值，分別為：static | absolute | fixed | relative。在蘇昱的《CSS2中文手冊》中是這樣解釋的：static:無特殊定位，對象遵循HTML定位規則； absolute:將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對定位。而其層疊通過z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框； relative:對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置； fixed:IE5.5及NS6尚不支持此屬性。
但是要想改變對象的層疊位置需要的是另一個CSS屬性：z-index。但是這個z-index并非是無所不能的，他受到了HTML代碼等級的制約。z-index只能在同等級的HTML上體現他的作用。這里需要聲明的是z-index只有在對象的position值為relative/absolute時才可以使用。下面我們就舉些例子來解釋等級的特性：
<p id="box_1"> <p id="a">這是第一個塊</p> <p id="b">這是第二個塊</p> </p>
針對上面的這個HTML代碼我們還需要寫一段CSS來定義它：
#a,#b {position:absolute; width:300px; height:100px; }
#a {z-index:10; left:0; top:0; background:#000; }
#b {z-index:1; left:20px; top:20px; background:#c00; }這是最普通的在這種情況下#a與#b的層疊等級是可以通過z-index來設定的。這是沒問的，那么什么樣的情況下就會出現問題呢？我們再看一個實例：
<p id="box_1"> <p id="a">這是第一個塊</p> </p> <p id="box_2"> <p id="b">這是第二個塊</p> </p>
根據這個結構再寫一個CSS,要注意這個CSS中的不同的地方:
#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
#a, #b {position:absolute; width:100px; height:300px; }
#a {background:#c00; z-index:100; }
#b {background:#0c0; z-index:1; left:50px;}這時候我們看,不論#a設為多大的值,他都無法超過#b,所以說z-index是無法沖破HTML的等級的,他必需是要同等級的狀態下才可以發揮威力.那么如何解決這個問題呢?我可以反過來想,堂兄弟之間的順序不能被重組,何不把父輩的等級做一次重組呢?所以我們把#box_1的CSS中加入一個z-index:100; 在#box_2的CSS中加入z-index:1;這樣再看一下效果:
#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
#box_1 {z-index:100;}
#box_2 {z-index:1;}
#a, #b {position:absolute; width:100px; height:300px; }
#a {background:#c00; }
#b {background:#0c0; left:50px;}聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 www.alabama37th.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
