1

基本上，我试图#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这仅适用于 FF、Opera 和 Webkit。不支持IE。.triangle-rz-index:-1

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

4

1 回答 1

3

你是绝对正确的 - 它是关于堆叠上下文。

每当您将 z-index 放在元素上时，您都会创建一个新上下文，因此因为三角形是 #page_container 的后代，它们将属于 #page_container 的堆叠上下文，无论您为三角形，它们仅在此上下文中有意义，您将无法将它们向后移动到此容器后面。

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

可能的解决方案是；

  • 将元素移出 html 结构中的容器（然后使用 css 将它们放置在您想要的位置）
  • 从容器中删除 z-index 并将三角形设置为 z-index -1 以将它们移动到文档本身下方
于 2012-05-12T01:35:23.540 回答