CSS IE7のzインデックス

Question

I'amこのようなグラフィックを生成しようとしている：

をしかし、私は得る：

CSS：

#green { height: 500px; width: 500px; background-color: green; position:absolute;z-index:13; } 
    #red { height: 300px; width: 300px; background-color: red; position:absolute; z-index:17; } 
    #blue { height: 400px; width: 400px; background-color: blue; position:absolute; z-index:15;} 

HTML：

を

<div id="blue"></div> 
<div id="green"> 
    <div id="red"></div> 
</div> 

主な問題は、上記のようにhtmlコードを特定する必要があることです。この機能を実装するために必要なCSSコード（IE7 +と互換性がある必要があります）を教えてください。あるいは、JSがこれを手助けするだろうか？私はどんなアドバイスにも満足しています。

Answer 1

z-index CSS属性は、DOM階層内の同じレベルに存在する要素にのみ関連します。したがって、赤色に置かれたz-インデックス値は無関係です。青色と緑色の物質のz-インデックスのみ。青色のz-インデックスは緑色よりも高いので、上に表示されます。反直感的ですが、仕様に準拠しています。

私は静的にまたはJavaScriptを使用して実行時にHTMLを変更することを含まない修正はありません。例えば。赤色が青色と緑色と同じレベルで出現した場合、正常に動作するはずです。

Answer 2

これはあなたがそれを外にしているよりも簡単です。各divを別のdivの中に入れ子にすると、そのレイアウトが自動的に処理されます。緑のdiv might do the trickためz-indexルールを削除

<div id="green"> 
    <div id="blue"> 
     <div id="red"></div> 
    </div> 
</div> 

---

#green 
{ 
    width: 400px; 
    height: 400px; 
    background: green; 
    position: absolute; 
} 

#green #blue 
{ 
    width: 300px; 
    height: 300px; 
    background: blue; 
} 

#green #blue #red 
{ 
    width: 200px; 
    height: 200px; 
    background: red; 
} 

Answer 3

：以下のコードを持つJSFiddle hereがあります。問題はIE7ではうまくいかないことです。しかし、IE8 +などは、うまくいくはずです。

Answer 4

position: absoluteを#greenから削除するだけです（この場合はz-indexも不要になります）。 IE6とIE7を含むすべてのブラウザで動作します。

フィドール：http://jsfiddle.net/PD83G/。