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

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

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

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

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

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

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