0

簡単な質問です。1つは絶対配置、もう1つは相対配置の2つのdivがある場合、z-indexを実行していないため、jsfiddleを添付しました。

両方を相対的にすると、それらは DOM の流れに沿って進み、一方が z 軸ではなく y 軸で他方の上に移動します。アイデアはありますか?

JSfiddle の例(jsfiddle のレンダリングを修正してくれた Onheiron に感謝)

何が起こっているかのスクリーンショット: http://i.imgur.com/Lo37y.png、灰色のものが画像の後ろにあるはずです。

ありがとう。

4

2 に答える 2

3

親の背後に子を表示させることはできません。兄弟でしかできません。

更新されたフィドルを参照してください

于 2012-08-08T08:26:28.517 に答える
2

この質問に答えるには、スタッキングのコンテキストを説明する必要があります。

要素に z-index を追加すると、スタッキング コンテキストが作成されます。次に、すべての子要素がこの親スタック コンテキストと比較されます。

Your element "slideImg" has a z-index of 1000. 次に、子要素は、この親要素のスタック コンテキスト内で比較されます。したがって、「shadow」の z-index は 0 ですが、実際には「1000 + 0」です。これは、「slideImg」のスタック コンテキスト内にあるためです。

"slideImg" の後ろに "shadow" を配置するには、ネストを逆にすることができます。

    <div id="shadow">    
          <div id="slideImg"></div>    
    </div>

または、それらを互いに隣接させて、それぞれが同じスタック コンテキストで考慮されるようにします。

    <div id="shadow"></div>
    <div id="slideImg"></div>

ここに z-index と Stacking Contextの説明があります。

于 2012-08-08T08:35:28.210 に答える