意外的z-index堆叠行为

Question

基本上，我试图在我的网站上的#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显然具有比#page_container z-index:10更低的z-index:5 ，但它们仍然出现在#page_container 。

通过将.triangle-l和.triangle-r为z-index:-1我已经能够完成我想要的结果。但是这仅适用于FF，Opera和Webkit。 没有IE支持。

我认为这与堆叠环境有关。 但是，我不确定如何通过跨浏览器兼容性来实现所需的结果。

Answer 1

你是绝对正确的 - 这是关于堆叠的背景。

每当你在元素上放置z-index时就会创建一个新的上下文，因为三角形是#page_container的后代，它们将属于#page_container的堆叠上下文，无论你选择什么z-index数字三角形，它们只在此上下文中有意义，并且您将无法在此容器后面向后移动它们。

请在此处详细阅读： https ： //developer.mozilla.org/en/CSS/Understanding_z-index/The_stacking_context

可能的解决方案;

• 将元素移出html结构中的容器（然后用css将它们放在你想要的位置）
• 从容器中删除z-index并将三角形设置为z-index -1以将它们移动到文档本身下方