親要素に z-index を適用すると、::before 擬似要素が親要素の後ろに表示されないのはなぜですか?

Z インデックスと疑似要素: 徹底した探索

この記事では、CSS の魅力的な世界を詳しく掘り下げていきますコンテキストのスタックと、コンテキストが疑似要素、特に ::before 疑似要素とどのように相互作用するかについて説明します。 ::before で z-index を使用するときに発生する一般的な問題を調査し、正しいスタック動作を保証する包括的なソリューションを提供します。

問題

次の CSS:

<code class="css">header { 
    background: yellow;
    position:relative;
    height: 100px;
    width: 100px;
    z-index:30;
}

header::before { 
    content:"Hide you behind!";
    background: red;
    position:absolute;
    height: 100px;
    width: 100px;
    top:25px;
    left:25px;
    z-index:-1;
}</code>

このコードでは、::before 疑似要素を持つ 'header' 要素を作成しました。望ましい動作は、黄色の「header」要素が前景にあり、赤色の ::before 疑似要素が背景にあることです。ただし、z-index 30 を「header」要素に適用すると、::before 疑似要素は親の後ろに表示されなくなります。

説明

この動作を理解するには、CSS スタッキング コンテキストの概念を詳しく理解する必要があります。スタッキング コンテキストは、z インデックス値に基づいて要素が互いの前後に積み重ねられるレイヤーのセットを定義します。スタッキング コンテキストの作成は、z-index などの特定の CSS プロパティによってトリガーされます。

上記の例では、z-index 30 を「header」要素に適用すると、新しいスタッキングが作成されます。コンテクスト。この新しいスタッキング コンテキストは、「header」要素とその子 (::before 擬似要素を含む) をドキュメント フローの残りの部分から分離します。

::before 擬似要素は、内部の子要素とみなされます。 「header」要素のスタッキングコンテキスト。したがって、スタッキング コンテキストの境界によって制約され、境界の外側にフロートして 'header' 要素の背後に表示することはできません。

解決策

この問題を解決するには、次のようにします。 ::before 疑似要素の z-index を単純に増やすことはできません。代わりに、::before 疑似要素の新しいスタッキング コンテキストを作成して、「header」要素の後ろに正しくスタックできるようにする必要があります。

これを実現する 1 つの方法は、「header」要素をラップすることです。以下に示すように、別の要素で:

<code class="css"><div class="wrapper">
  <header>
    ...
  </header>
</div>

.wrapper { 
    position:relative;
    z-index:30;
}</code>

この新しい要素を作成し、それに z-index を割り当てることにより、基本的に、「header」要素のスタッキング コンテキストとは別の新しいスタッキング コンテキストを作成することになります。これにより、::before 擬似要素が新しいスタッキング コンテキスト内の 'header' 要素の後ろに正しくスタックできるようになります。

結論

CSS スタッキング コンテキストと擬似要素について理解する要素の相互作用は、複雑なレイアウトを作成し、要素を適切に配置するために不可欠です。スタッキング コンテキストを慎重に管理することで、要素の階層化を制御し、望ましい視覚効果を実現できます。

以上が親要素に z-index を適用すると、::before 擬似要素が親要素の後ろに表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。