CSS で Z-Index を使用して親要素と子要素を正しく階層化するにはどうすればよいですか?

Z-Index での親要素と子要素の分離

CSS では、z-index プロパティは Web ページ上の要素の階層化を制御します。 。ただし、CSS のスタッキング コンテキストの処理方法により、z インデックスが高いにもかかわらず、親要素が子要素の背後に表示される場合があります。

この問題を解決するには、必ずしも負の z インデックスを使用する必要はありません。子要素に。代わりに、次の解決策を検討してください:

親の Z インデックスを削除し、子の Z インデックスを変更します:

親に Z インデックスを設定する代わりに、親を削除します。そして子に負の Z インデックスを設定します。これにより、子要素がページ コンテナの外に押し出されることなく、親要素の下に留まることが保証されます。

修正された CSS コードは次のとおりです:

.parent {
  position: relative;
  width: 350px;
  height: 150px;
  background: red;
  border: solid 1px #000;
}
.child {
  position: relative;
  background-color: blue;
  height: 200px;
  z-index: -1;
}

相対位置の確保:

適切な機能を有効にするには、親要素と子要素の両方の位置プロパティを相対または絶対に設定する必要があります。

HTML の例:

<div class="wrapper">
  <div class="parent">parent 1 parent 1
    <div class="child">child child child</div>
  </div>
  <div class="parent2">parent 2 parent 2</div>
</div>

このソリューションは、ページ全体のレイアウトを中断したり、予期しない動作を引き起こしたりすることなく、親要素を子要素の上に配置します。

以上がCSS で Z-Index を使用して親要素と子要素を正しく階層化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。