1

次のような状況があります。

私の階層は次のとおりです。

box1: (z-index: 5000)
  -(other parent elements)
    -box1_child (z-index: 5001)
box2 (z-index: 5000)
  -(other parent elements)
    -box2_child (z-index: 5002)

明らかに、box1 と box2 を同じレベルにする必要があります。box1_child を box2 の上に置きたい。box2_cihld を box1_child の上に置きたい。

基本的に、box1_child は box2 の上に座っていません。

これは可能ですか (最近のブラウザでは?)

すべての要素には非静的な位置があります。

4

2 に答える 2

1

隣接する 2 つの要素が同じ Z インデックスを持っていても、それらには特定の重なり順があります。つまり、後から来る要素が最初の要素の上に描画されます。

これを使用すると、この CSS (簡略化) を使用して、必要な方法で要素を積み重ねることができます。 

#box1{
    position: absolute;
    z-index:auto;
}
#box1_child {
    position: absolute;
    z-index:1;
}
#box2{
    position: absolute;
    z-index:auto;
}
#box2_child {
    position: absolute;
    z-index:1;
}

次に、box2 が box1 の上に描画され (オーバーラップする場合)、box2_child が box1_child の上に描画されますが、両方の子が親ボックスの上に描画されます。

jsFiddle .

さまざまな新しいブラウザでテスト済み。私はここに Firefox 4 を持っていないので、そこで動作しないことを確認できません。

z-index:0編集:と同じであるという私の仮定が間違っていたようautoです。確かに 0 では機能しないので、5000 でも機能しません。謝罪いたします。

于 2013-07-11T08:01:44.443 に答える
1

非自動 z-index を持つものは、アトミックにスタックする新しいスタック コンテキストを形成します。

したがって、必要な効果を得るには、box1 と box2 に auto z-index が必要です... 正の z-index は auto の上にスタックされるため、必要な動作が得られることに注意してください。

于 2013-07-11T16:34:56.417 に答える