Css 意外的z索引堆叠行为

基本上，我试图在我的站点上的

#page_容器

后面放置重叠角，这样看起来图像与页面重叠

实例：

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>

#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_容器

z-index:10

，但它们仍然出现在

#page_容器

的上方

通过将

.triangle-l

和

.triangle-r

设置为

z-index:-1

，我已经能够实现我想要的结果，但是这只适用于FF、Opera和Webkit。没有IE支持

---

我认为这与堆叠上下文有关。但是，我不确定如何实现跨浏览器兼容性的预期结果。

你完全正确-这与堆叠上下文有关

无论何时在元素上放置z索引，都会创建一个新的上下文，因此，由于三角形是#page_容器的后代，因此它们将属于#page_容器的堆叠上下文，并且无论为三角形选择什么z索引编号，它们只在该上下文中有意义，您将无法将它们向后移动到此容器后面

请在此详细阅读：

可能的解决办法是：

• 将元素移出html结构中的容器（和 然后使用css将它们定位到您想要的位置）
• 从容器中删除z索引，并将三角形设置为z索引-1，以将其移动到文档本身下方

---

将三角形设置为z-index-1，这是我目前拥有的。然而，这不是IE友好，因此我的困境。你对IE的哪个版本有问题？我刚刚在IE8中进行了测试，这是我目前可用的，它的工作原理与我在回答中概述的完全相同：