我正在尝试创建一个边框,底部有一个三 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;
}
最佳答案
那是因为元素在 DOM 中不在同一层。你必须把 z-index 放到 <UL>
元素...不是<LI>
.
关于css - Z-Index 似乎没有效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14209879/