Z インデックスが高くても、親要素をその子要素の上に表示するにはどうすればよいですか?

Z 軸でのネストされた要素の配置

Web デザインでは、要素を相互にネストするのが一般的です。ただし、Z 軸での位置決めに関しては、目的の効果を達成するのが難しい場合があります。この質問では、z-index 値が高いにもかかわらず、親要素が子要素の上に表示される必要があるシナリオについて説明します。

この問題は、子に負の z-index を設定すると、子要素がその値を下回るために発生します。要素が含まれているため、望ましくない配置が発生します。この問題を解決するには、親要素から z-index を削除し、子要素に負の z-index を割り当てることが回答で提案されています。これにより、ページ コンテナの位置を犠牲にすることなく、親要素が Z 軸の最上部に留まることが保証されます。

解決策を示すための変更例を次に示します。

.parent {
  position: relative;
  width: 350px;
  height: 150px;
  background: red;
  border: solid 1px #000;
}

.child {
  position: relative;
  background-color: blue;
  height: 200px;
  z-index: -10;
}

.wrapper {
  position: relative;
  background: green;
  height: 350px;
}

<div class="wrapper">
  <div class="parent">parent 1 parent 1
    <div class="child">child child child</div>
  </div>
  ...
</div>

この更新された CSS では、z-index プロパティがないにもかかわらず、親要素は子要素の上に残ります。子は負の Z インデックスにより親の下に配置され、望ましい重なり効果が保証されます。

以上がZ インデックスが高くても、親要素をその子要素の上に表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。