親に Z インデックスがある場合、擬似要素を親の後ろに配置するにはどうすればよいでしょうか?

擬似要素の Z インデックスの操作

CSS では、Z インデックスを親要素に適用すると、擬似要素のスタック動作に影響を与える可能性があります-要素。この記事では、この問題を調査し、解決策を提供します。

問題

親要素に z-index が与えられると、それに含まれる擬似要素がその中に制限されます。親のスタッキングコンテキスト。擬似要素は、このコンテキストの外に拡張して親の背後に表示することはできなくなりました。

スタッキング コンテキストについて

新しいスタッキング コンテキストを作成すると、基本的に、問題の要素。そのレイヤー内の要素は、コンテキストの外側の要素から分離されます。この場合、通常は親のレイヤー内に存在する疑似要素が、親の新しいスタッキング コンテキスト内にトラップされます。

解決策

問題は、CSS を使用すると、積み重ねられたコンテキストから抜け出すことができます。これは通常、特定の積み重ね順序を必要とする親要素の前に新しい要素を導入することで実現されます。この「ラッパー」要素は独自のスタック コンテキストを形成し、後続の要素のスタック順序に影響を与えながら、擬似要素をその背後に残すことができます。

コード例

次のコードを考えてみましょう。

<code class="css"><div id="wrapper">
  <header>
    <span class="pseudo">Hide me!</span>
  </header>
</div>

#wrapper {
  position: relative;
  z-index: 30;
}

header {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: yellow;
}

.pseudo {
  position: absolute;
  top: 25px;
  left: 25px;
  height: 100px;
  width: 100px;
  background-color: red;
  z-index: -1;
}</code>

「ラッパー」 div を作成し、その位置を相対に設定し、z-index を 30 に設定することにより、擬似要素が外側に存在できる新しいスタッキング コンテキストを確立します。擬似要素は、意図したとおり、黄色の「header」要素の後ろに表示できるようになりました。

以上が親に Z インデックスがある場合、擬似要素を親の後ろに配置するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。