基本上,我正在尝试在我的网站上的#page_container
后面放置重叠角,这样看起来图像与页面重叠。
实例:http://jsfiddle.net/xBwQp/15/
HTML:
<div id="page_container">
<div id="banner_wrapper">
<img id="banner_image" src="http://placehold.it/350x150" />
<div class="triangle-l"></div>
<div class="triangle-r"></div>
</div>
</div>
CSS:
#page_container {
background: red;
width: 400px;
position: relative;
z-index: 10;
}
#banner_wrapper {
position: relative;
}
#banner_image {
position: relative;
}
.triangle-l {
border-color: transparent green transparent transparent;
border-style: solid;
border-width: 15px;
height: 0px;
width: 0px;
position: absolute;
right: 0px;
top: 0px;
z-index: 5;
}
.triangle-r {
border-color: transparent transparent transparent blue;
border-style: solid;
border-width: 15px;
height: 0px;
width: 0px;
position: absolute;
right: 0px;
top: 0px;
z-index: 5;
}
您可以看到三角形.triangle-l
和.triangle-r
显然比z-index:5
#page_container
低z-index:10
,但它们仍显示在#page_container
.triangle-l
之上{1}}。
我已经能够通过将.triangle-r
和z-index:-1
设置为{{1}}来完成我想要的结果,但这仅适用于FF,Opera和Webkit。没有IE支持。
我认为这与堆叠环境有关。但是,我不确定如何通过跨浏览器兼容性来实现所需的结果。
答案 0 :(得分:3)
你是完全正确的 - 这是关于堆叠的背景。
每当你在一个元素上放置z-index时就会创建一个新的上下文,因为三角形是#page_container的后代,它们将属于#page_container的堆叠上下文,无论你是什么z-index编号选择三角形,它们只在这个上下文中有意义,你将无法在这个容器后面向后移动它们。
请在此处详细阅读:https://developer.mozilla.org/en/CSS/Understanding_z-index/The_stacking_context
可能的解决方案是;