予期しないZ-インデックスのスタッキング動作

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：あなたは、三角形、.triangle-lと.triangle-rは、はっきりz-index:5下を持っていることがわかります

#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; 
} 

th #page_containerz-index:10が表示されますが、それらはまだ#page_containerの上に表示されます。

.triangle-lと.triangle-rをz-index:-1に設定することで、私の望む結果を達成することができましたが、これはFF、Opera、およびWebkitでのみ機能します。 IEサポートなし。

私はそれがスタッキングの文脈と関係していると信じています。しかし、私はブラウザ間の互換性をもって望む結果を達成する方法が不明です。

Answer 1

あなたは本当に正しいですか？それはスタッキングに関するものです。

要素にz-indexを置くたびに、新しいコンテキストを作成します。したがって、三角形は#page_containerの子孫であるため、#page_containerのスタッキングコンテキストに属し、三角形を選択すると、このコンテキスト内でのみ意味を持ち、このコンテナの後ろにそれらを移動することはできません。ここでは詳細に

読む：https://developer.mozilla.org/en/CSS/Understanding_z-index/The_stacking_context

可能な解決策です。

• 移動HTML構造内のコンテナのうちの要素（あなたがCSSでたい場所と は、それらを配置）
• がコンテナからのzインデックスを削除し、Zインデックスに三角形を設定し-1それらを文書そのものの下に移動するには