CSS 疑似要素を親要素の下に配置できますか?

CSS のスタック順序: 擬似要素を親要素の下に配置できますか?

:after 擬似要素を使用して要素をスタイル設定する場合、擬似要素は常に親要素の上にあるように見えるかもしれません。これは、疑似要素は本質的に、関連付けられた要素の子孫として扱われ、同じスタッキング コンテキストを継承するためです。

解決策: 新しいスタッキング コンテキストを作成する

親の下に疑似要素がある場合は、新しいスタッキング コンテキストを作成する必要があります。これは、擬似要素を絶対的に配置し、「auto」以外の z-index 値を割り当てることで実現できます。

次の CSS および HTML コードを考慮してください。

#element {
    position: relative; /* optional */
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;

    /* create a new stacking context */
    position: absolute;
    z-index: -1; /* to be below the parent element */
}

説明:

• #element div には相対位置が与えられ、絶対配置のコンテキスト。
• :after 擬似要素は、その内容と寸法で定義されます。
• 擬似要素は絶対的に配置され、負の Z インデックス (-1) が割り当てられます。親要素の下に配置されていることを確認してください。

この新しいスタッキング コンテキストを使用すると、:after 疑似要素を次のようにすることができます。親要素の重なり順に関係なく、#element div の下に配置されます。

以上がCSS 疑似要素を親要素の下に配置できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。