Javascriptでdivの重複を理解するのに問題があります。あなたは緑色のボックスは、これらの他の二人によってラップされている見ることができるようにZ軸のインデックスから要素をオーバーラップ
は
http://jsfiddle.net/CapKK/を参照してください。しかし、div-1（赤いボックス）にZ-インデックスを追加すると、すぐには機能しなくなります。
誰かがそれを説明できますか？ div1のZ-indexが0の場合、この設定が破棄されるのはなぜですか？
z-indexプロパティは、要素のスタック順序を指定します。
スタックオーダーの大きいエレメントは、常にスタックオーダーの低いエレメントの前にあります。
div3の方がスタック順序が大きいため、その前に表示されます。
後でページに複数の要素を追加する場合は、他のすべての要素のzインデックス値を調整することなく、それらを層に部屋を持っています。たとえば、
* 100 for my top-most element
* 0 for my middle element
* -100 for my bottom element
同じZ-インデックス値を2つ与えることもできます。これらの要素が積み重ねられている場合は、HTMLに書かれた順に表示され、最後の要素が上に表示されます。
階層化する各要素に異なるZ-インデックス値を付けることができます。例えば、私は、5つの異なる要素を有する場合：
* element 1 — z-index of -25
* element 2 — z-index of 82
* element 3 — z-index not set
* element 4 — z-index of 10
* element 5 — z-index of -3
：
これは明らかです。 div2はdiv1とdiv3でラップすることができます。私が知る限り、それらは同じスタック順ではありません。 – Zardoz
スタッキングコンテキストの生成方法については、https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_contextをお読みください。特に、要素がauto以外のz-インデックスで配置されていない限り、スタッキングコンテキストは形成されません。 div要素のz-indexが0のとき、緑色のボックスが重なり合うのはなぜですか？ – Illianthe
これはなぜですか？ div-1のz-indexが0に設定されているときの動作を行います。しかし、div-1にz-index auto setを設定すると、そのように動作する理由はまだ説明されていません。私は少し例を変更しました：http://jsfiddle.net/CapKK/1/ここでdiv3は何の積み上げ順序ですか？ z-indexが設定されているのは唯一のものですが、3つすべてが同じスタック順序にあるように動作します。 – Zardoz