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>。