z-Index が正しく使用されているにもかかわらず、順序が狂って表示される Div を修正するにはどうすればよいですか?

z-index によるスタック順序の制御

HTML で要素を階層化する場合、z-index はどの要素が一番上に表示されるかを制御します。 z-index を正しく使用しているにもかかわらず、div が別の div の下に残る場合があります。

この問題を解決するには、次の点を考慮してください:

CSS コード:

<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>

説明:

1. 位置を追加: 両方の div を基準にしてスタッキング コンテキストを作成します。これにより、z-index が適切に機能できるようになります。
2. 一番上に表示される div (div1) に、より高い z-index を設定します。
3. 基になる div の z-index (

これらの手順を実装すると、div1 は希望のスタック順序で div2 の上に正しく表示されます。

以上がz-Index が正しく使用されているにもかかわらず、順序が狂って表示される Div を修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。