最初の DIV Div1 に Div2 よりも低い Z-Index 値を与えても表示されるのはなぜですか?

Z-index を使用して DIV を重ね合わせる

この質問では、Z-index を使用して DIV 要素の積み重ね順序を制御する方法について説明します。質問者は、z-index を使用して、ある DIV (div1) を別の DIV (div2) に重ね合わせようとしましたが、期待した効果は得られません。

提供されたコードには、異なる z-index 値を持つ 2 つの DIV 要素が含まれています。

<code class="css">.div1 {
  z-index: 1;
}
.div2 {
  z-index: 2;
}</code>

div2 の Z インデックスが高いにもかかわらず、div1 はその前に表示されたままになります。これは、要素の位置が明示的に設定されていないためです。

この問題を解決するには、両方の div を基準にしてposition: を追加する必要があります。これによりスタッキング コンテキストが作成され、要素を相互に相対的に配置できるようになります。更新されたコードは次のようになります。

<code class="css">.div1 {
  z-index: 2;
  position: relative;
}
.div2 {
  z-index: 1;
  position: relative;
}</code>

この変更により、作成されたスタッキング コンテキスト内では z-index 値が優先されるため、div1 は div2 の上に正しく配置されます。

以上が最初の DIV Div1 に Div2 よりも低い Z-Index 値を与えても表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。