## `z-index` を使用するときに `::before` 擬似要素を親の後ろに配置するにはどうすればよいですか?

Before 擬似要素に関する Z インデックスの難題

親要素内で before 擬似要素を使用する場合は、その要素に対処することが不可欠ですポジショニング動作。デフォルトでは、擬似要素はその親要素の内部に配置されます。

ただし、z-index を親要素に割り当てると、新しいスタッキング コンテキストが作成され、その内容が分離されます。その結果、z-index が負であっても、スタッキング コンテキスト境界のため、before 疑似要素は親の背後に表示できなくなります。

これに対処するには、次の解決策を検討してください。

1. 個別の要素階層: ヘッダー要素の前に別の要素を置きます。これにより、自然な積み重ね順序が作成され、新しい親要素にヘッダーよりも低い Z インデックスを与えることができ、前の擬似要素をその後ろに表示できるようになります。
2. Z-Index Nesting: あまり推奨されませんが、擬似要素に負の z-index 値を使用し、親要素に正の値を使用して、同じスタック コンテキスト内で希望のスタック順序を作成できます。ただし、このアプローチではコードがより複雑になり、ブラウザ間の互換性の問題が発生する可能性があります。

例:

<code class="css"><div class="wrapper">
  <header>
    content...
    <span class="pseudo-element">Before content...</span>
  </header>
</div>

.wrapper {
  position: relative;
  z-index: 0;
}

header {
  position: relative;
  background: yellow;
  height: 100px;
  width: 100px;
  z-index: 1;
}

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

以上が## `z-index` を使用するときに `::before` 擬似要素を親の後ろに配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。