CSS で親要素をその子の上に表示するにはどうすればよいですか?

Z 軸で親要素を子の上に移動する方法

CSS では、ネストされた要素の望ましい積み重ね順序を達成するのが難しい場合があります。この質問は、Z 軸で子要素が親要素の上に表示され、Z インデックスの設定だけでは不十分であるというシナリオに取り組みます。

これに対処するには、解決策には負の Z インデックス値を設定する必要があります。子要素の場合。対照的に、親要素の 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: -1;  // Negative z-index applied to the child element
}

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

Withこの変更により、親要素が Z 軸で子要素の上に表示されるようになり、元の質問で説明された問題が効果的に解決されます。

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