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

註：本文執行個體在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;}

xmlns="http://www.w3.org/1999/xhtml">

• 第一塊
• 第二塊
• 第三塊
• 第四塊
• 第五塊