意外的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以將它們移動到文檔本身下方