1

Javascript の div の重複を理解するのに問題があります。

http://jsfiddle.net/CapKK/を参照してください

ご覧のとおり、緑色のボックスは他の 2 つのボックスで囲まれています。しかし、z-index を div1 (赤いボックス) に追加するとすぐに機能しなくなります。

誰かがそれを説明できますか？div1 の 0 の z-index がこのセットアップを破壊するのはなぜですか?

4

1 に答える 1

2

z-indexプロパティは、要素のスタック順序を指定します。

スタック順序が大きい要素は、常にスタック順序が小さい要素の前にあります。

div3のスタック順序は大きいため、前面にあります。

後でページに要素を追加する場合は、他のすべての要素のz-index値を調整しなくても、それらをレイヤー化する余地があります。例えば：

* 100 for my top-most element
* 0 for my middle element
* -100 for my bottom element

2つの要素に同じz-index値を与えることもできます。これらの要素がスタックされている場合、最後の要素が上になるように、HTMLに記述されている順序で表示されます。

階層化する各要素に異なるz-index値を与えることができます。たとえば、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

それらは次の順序でスタックします。

  1. 要素2
  2. 要素4
  3. 要素3
  4. 要素5
  5. 要素1
于 2011-01-27T13:22:51.830 に答える