css - Z-Index 似乎没有效果

Question

我正在尝试创建一个边框，底部有一个三 Angular 形。可以在本页的评论部分看到一个例子:http://www.browserstack.com/

我已经创建了我的三 Angular 形图像以覆盖在框的顶部以创建效果，但我无法让它位于框的顶部。

这是我的 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 LI 设置为具有相对定位，并为 UL LI 提供更大的 z-index，但这似乎没有任何作用。

编辑:我也试过将定位和 z-index 放在 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-index 放到 <UL>元素...不是<LI> .