z-index が高いにもかかわらず、div1 が div2 の上に表示されないのはなぜですか?

z-index を使用して別の Div の上に Div を配置する

Web 開発では、目的を達成するために div を互いの上に重ねる必要がある状況に遭遇することがあります。視覚効果。ただし、z-index を使用しても、常に期待どおりの結果が得られるわけではない場合があります。

よくある問題の 1 つは、より高い z-index 値を指定したにもかかわらず、div1 が div2 の上に表示されない場合です。この背後にある理由は、適切なスタッキング コンテキストの欠如である可能性があります。

スタッキング コンテキストを確立するには、CSS プロパティのposition: 両方の 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>

この変更により、div1 が上に適切に表示されるようになります。ディビジョン2。 z-index は、同じスタッキング コンテキスト内のスタッキング順序にのみ影響することに注意してください。

以上がz-index が高いにもかかわらず、div1 が div2 の上に表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。