position:relative/absolute無法衝破的等級_經驗交流

註：本文實例在IE5.x下可能會顯示不出來，請使用IE6、IE7、Firefox、Opera等瀏覽器來調試！
前段時間記得好像是誰在群組裡提出了一個實在是讓大家都覺得很不理解的一個問題： 

複製程式碼 程式碼如下:

  

• 第一塊
  

• 第二塊  
  
• 第三塊
  

• 第四塊
  

• 第五塊
  

 

如果我我們設定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; background:#000; float:left; position:relative; background:#000; float:left; position:relative; span {width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN"> <title></title> <style type="text/css"> /*<![CDATA[*/ *{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;} /*]]>*/ </style> <ul> <li>第一塊</li> <li><span>第二塊</span></li> <li>第三塊</li> <li>第四塊</li> <li>第五塊</li> </ul>
[​​Ctrl A 全選注:如需引入外部Js需刷新才能執行]提示：您可以先修改部分程式碼再執行
試一下很容易發現我們的子級，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，而且屬性都需要一樣呢？當然我們不大會需要有這樣的效果。但是我們需要有這樣的效果：子級全部都是隱藏的，當有滑鼠反應時出現並且浮在所有的內容之上。我們要知道，這確實是件讓人頭痛的事，因為我們上面見識到了，子級在顯示的時候都被壓在了下一個父級標籤的下面。下面我們來實現這個滑鼠反應的定位效果：

複製程式碼 程式碼如下:

  

• 第一塊
  

• 第二塊
  

• 第三塊
  

• 第四塊
  

• 第五塊
  

  

我們透過連結的滑鼠事件來完成這個顯示隱藏效果：

複製程式碼 程式碼如下:

*{ margin:0; padding:0; list-style:none;}  
li {height:100px; margin:0 5px 0 0; float:left; width:100px 0 0; float:left; width:100px); z-index:1; display:block; height:100px; width:100px;  background:#000;}  
li a:hover {background:#000000;} 
li a:hover {background:#000000;} 
li a:hover { BR>li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; position:absolute; top:0; left:100px; position:absolute; top:0; left:100px; position:100 ; >

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN">標題> /**/ 風格> 頭> <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>正文>
[​​Ctrl A 全選注:如需導入外部Js需刷新才能執行]

    提示：您可以先修改部分程式碼再運行
我們設定了a為位置：相對;這樣他的子級就會根據父級的坐標為坐標然後隱藏原點進行定位了。我們設定跨度的具體形狀以及定位屬性，然後重力了。再一個的α類：懸停使得span被啟動。我們看一下結果，我們會發現，所有的都應該在上面的現在全部在下面了。那我們怎麼解決這個問題呢，其實以CSS想要強行突破是不太可能的，所以我們反過來想，不能讓這個沒有被觸發的父級標籤沒有position:relative;屬性，而只是觸發的時候繼承這個父級賦上這樣的值？其實想到這裡基本上已經可以解決所有的問題了：

複製程式碼程式碼如下：

*{margin:0;填充：0；列表樣式：無；}  
li {高度：100px;邊距：0 5px 0 0；向左飄浮;寬度：100px;}  
li a {display:block;高度：100px；寬度：100px；背景：#000;}  
li a:hover {position:relative; z 索引：1； }  
li span {display:none;}  
li a:hover span {display:block;寬度：200px；高度：200px；背景：#c00；位置：絕對；頂部：0；左：100px； z 索引：1000； }  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN">標題> /**/ 風格> 頭> <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>正文>
[​​Ctrl A 全選注:如需引入外部Js需刷新才能執行]

    提示：您可以先修改部分程式碼再運行
我們只針對a:hover來設定其屬性為position:relative;就可以了，這樣只有在滑鼠觸發的時候A才會被賦於一個相對定位的屬性。這樣就完成可以解決被其他父級標籤所擋的尷尬了。BR> 當然如果不介意IE6或IE5.X這樣的瀏覽器 我們還可以把程式碼再做簡化：

複製程式碼程式碼如下：

  

• 第一塊
  

• 第二塊
  

• 第三塊
  

• 第四塊
  
• 第五塊
  

  

CSS可以改成這樣：

複製程式碼 代碼如下:

*{margin:0; padding:0; list-style:none;}  
li {height:100px; margin:0 5px 0 0; float:left; width:100px; background:#000;}  
li:h {position:relative;#000;}  
li:h {position:relative;#000;}  
li:h {position:relative; span {display:none;}  
li:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0 }  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN"> <title></title> <style type="text/CSS"> *{margin:0; padding:0; list-style:none;} li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left;} 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; } </style> <ul> <li><span>第一塊</span></li> <li><span>第二塊</span></li> <li><span>第三塊</span></li> <li><span>第四塊</span></li> <li><span>第五塊</span></li> </ul>
[​​Ctrl A 全選注:如需引入外部Js需刷新才能執行]

    提示：您可以先修改部分程式碼再執行
原始閱讀：
http://andymao.com/andy/post/67.html