relative absolute無法衝破的等級問題解決_經驗交流

如果我我們設定li為position:relative;設定span為position:absolute;那麼我們會發現無論span的z-index值設定得再高都將永遠在後面父級的下面。

前段時間記得好像是誰在群組裡提出了一個實在是讓大家都覺得很不理解的一個問題： 

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