0

我正在尝试创建一个边框，底部有一个三角形。这方面的一个例子可以在这个页面的评论部分看到：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;
}
4

1 回答 1

1

那是因为元素在 DOM 中不在同一级别。你必须把 z-index 放到<UL>元素上……而不是<LI>.

于 2013-01-08T07:15:17.363 回答