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

Z-Index似乎没有效果

1 个答案: