Z-Index似乎沒有任何效果

Question

我試圖創建一個邊框，底部有一個三角形出來的框。一個例子可以在這個頁面的評論部分看到：http://www.browserstack.com/

我已經創建了我的三角形圖像覆蓋在框的頂部來創建效果，但我很難讓它坐在頂部的盒子。

這裏是我的HTML代碼：

<div class="box">...</div> 
<ul> 
    <li>...</li> 
</ul> 

這裏是我的CSS：

.box { 
    background: none repeat scroll 0 0 #eee; 
    border: 1px solid #aaa; 
    margin: 0; 
    position: relative; 
    z-index: 1; 
} 

ul { 
    margin: 0; 
} 

ul li { 
    position: relative; 
    z-index: 10; 
} 

ul li.active { 
     background: url("testimonial-triangle.png") no-repeat scroll 108px -1px transparent; 
} 

正如你所看到的，我已經嘗試設置.box的DIV和UL李有相對定位並給予UL LI一個更大的Z指數，但這似乎沒有做任何事情。

編輯：我也試過把定位和z-索引放在UL而不是LI上，但是這似乎並沒有做任何事情。這裏是我試過的CSS：

.box { 
    background: none repeat scroll 0 0 #eee; 
    border: 1px solid #aaa; 
    margin: 0; 
    position: relative; 
    z-index: 1; 
} 

ul { 
    margin: 0; 
    position: relative; 
    z-index: 10; 
} 

ul li {} 

ul li.active { 
     background: url("testimonial-triangle.png") no-repeat scroll 108px -1px transparent; 
} 

Answer 1

這是因爲DOM中的元素不在同一層。您必須將z索引設置爲<UL>元素...而不是<LI>。