position:relative/absolute無法衝破的等級

注：本文實例在IE5下可能會顯示不出來，請使用IE5.x、IE6、IE7、Firefox、Opera等瀏覽器來調試！

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

複製內容到剪貼板

代碼:

<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:200px; 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; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <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 {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; } 
 /*]]>*/
 </style>
</head>
<body>
<ul> 
<li><a href="" title="">第一塊</a></li> 
<li><a href="" title="">第二塊</a></li> 
<li><a href="" title="">第三塊</a></li> 
<li><a href="" title="">第四塊</a></li> 
<li><a href="" title="">第五塊</a></li> 
</ul> 
</body>
</html>

提示：您可以先修改部分代碼再運行

我們設定了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; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <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 {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; } 
 /*]]>*/
 </style>
</head>
<body>
<ul> 
<li><a href="" title="">第一塊</a></li> 
<li><a href="" title="">第二塊</a></li> 
<li><a href="" title="">第三塊</a></li> 
<li><a href="" title="">第四塊</a></li> 
<li><a href="" title="">第五塊</a></li> 
</ul> 
</body>
</html>

提示：您可以先修改部分代碼再運行

我們只要針對a:hover來設定其屬性爲position:relative;就可以了，這樣只有在鼠標觸發的時候A纔會被賦於一個相對定位的屬性。這樣就完成可以解決被其它父級標籤所擋的尷尬了。

當然如果不介意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; }

提示：您可以先修改部分代碼再運行

position:relative/absolute無法衝破的等級

代碼:

代碼:

代碼:

代碼:

代碼:

代碼:

代碼:

【SQL進階】CASE語句的使用

npm error Cannot read properties of null (reading 'isDescendantOf')

IIS W3C日誌記錄字段和HTTP狀態代碼

xhtml+css技巧

讓表格也能overflow:hidden？

css常用技巧

元素的class與ID命名常用關鍵字

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結