Z-Index を使用すると、擬似要素がヘッダー要素の上に表示されるのはなぜですか?

Z-Index と擬似要素: ケーススタディ

CSS では、z-index プロパティは要素の重なり順を指定します。ページで、どの要素が他の要素の「前」または「後ろ」に表示されるかを決定します。ただし、::before や ::after などの疑似要素に関しては、z-index との相互作用が簡単ではない場合があります。

次のようなヘッダー要素を作成するシナリオを考えてみましょう。 ::before 疑似要素 (問題文で説明されているとおり)。擬似要素をヘッダー要素の後ろに置くつもりですが、ヘッダーに z-index を適用すると、予期せず擬似要素が前面に出てきます。

説明は、擬似要素の性質にあります。要素自体。 CSS 仕様に記載されているように、::before および ::after 擬似要素は、「関連する要素のすぐ中に挿入された実際の要素であるかのように、他のボックスと相互作用します」。これは、擬似要素が親要素内に事実上ネストされていることを意味します。

ヘッダー要素に z-index を適用すると、新しいスタッキング コンテキストが作成されます。スタッキング コンテキストは、要素が Z インデックス値の順序でレンダリングされる 3D 空間です。同じスタッキング コンテキスト内の要素は互いにオーバーラップできません。

この場合、疑似要素はヘッダー要素と同じスタッキング コンテキスト内に配置されます。これはネストされた要素とみなされ、ヘッダーの後ろにフロートすることはできません。そのためには、スタッキング コンテキストをエスケープする必要があるためです。

この問題を解決するには、提案されているように、ヘッダーの前に別の要素を作成することが 1 つの解決策です。答えの中で。この要素はヘッダーと擬似要素のコンテナとして機能し、その z-index はヘッダーを前に正しくスタックします。

以上がZ-Index を使用すると、擬似要素がヘッダー要素の上に表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。