[英]Unexpected z-index stacking behavior
Basically, I am trying to put overlap corners behind the #page_container
on my site, so that it looks like the image is overlapping the page. 基本上,我试图在我的网站上的
#page_container
后面放置重叠角落,这样看起来图像与页面重叠。
Live example: http://jsfiddle.net/xBwQp/15/ 实例: http : //jsfiddle.net/xBwQp/15/
HTML : 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 : 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;
}
You can see that the triangles, .triangle-l
and .triangle-r
, clearly have a lower z-index:5
than the #page_container
z-index:10
but they still appear above the #page_container
. 您可以看到三角形
.triangle-l
和.triangle-r
显然具有比#page_container
z-index:10
更低的z-index:5
,但它们仍然出现在#page_container
。
I have been able to accomplish my desired result by setting .triangle-l
and .triangle-r
to z-index:-1
however this only works in FF, Opera, and Webkit. 通过将
.triangle-l
和.triangle-r
为z-index:-1
我已经能够完成我想要的结果。但是这仅适用于FF,Opera和Webkit。 No IE support. 没有IE支持。
I believe it has to do with the stacking context. 我认为这与堆叠环境有关。 However, I am unsure how to accomplish the desired result with cross-browser compatibility.
但是,我不确定如何通过跨浏览器兼容性来实现所需的结果。
You are absolutely right - it is about the stacking context. 你是绝对正确的 - 这是关于堆叠的背景。
Whenever you put z-index on an element you create a new context, so because the triangles are descendants of the #page_container they are going to belong to the stacking context of the #page_container and no matter what z-index number you choose for the triangles, they only have meaning inside this context, and you will not be able to move them backwards behind this container. 每当你在元素上放置z-index时就会创建一个新的上下文,因为三角形是#page_container的后代,它们将属于#page_container的堆叠上下文,无论你选择什么z-index数字三角形,它们只在此上下文中有意义,并且您将无法在此容器后面向后移动它们。
Read in detail here: https://developer.mozilla.org/en/CSS/Understanding_z-index/The_stacking_context 请在此处详细阅读: https : //developer.mozilla.org/en/CSS/Understanding_z-index/The_stacking_context
Possible solutions are; 可能的解决方案;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.