z-index で Div の重複問題を修正するにはどうすればよいですか?

z-index を使用した Div の重複の解決

特定のシナリオでは、z-index プロパティを使用している場合でも、Div の重複に関する問題が発生する可能性があります。 。望ましい階層効果を確実に得るには、z-index の正しい使用法を理解し、追加の CSS プロパティを使用してスタッキング コンテキストを作成することを検討することが重要です。

指定された例では、意図された動作は div1 が上に表示されることです。ディビジョン2。ただし、より高い z-index 値を div1 に割り当てるだけでは、必ずしも期待どおりの結果が得られるとは限りません。これに対処するには、position:relative プロパティを両方の div に追加する必要があります。これにより、要素内にスタッキング コンテキストが作成され、z-index が正しく有効になるようになります。

以下の変更されたコードには、この修正が組み込まれています。

<code class="css">div {
  width: 100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  position: relative;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1;
  position: relative;
}</code>

両方の div に対してposition: を追加することで、これらの要素に対して専用のスタッキング コンテキストを作成します。これにより、div1 に割り当てられたより高い z-index 値が確実に尊重され、意図したとおり div1 が div2 の上に表示されます。

以上がz-index で Div の重複問題を修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。