擬似要素を親要素の下に配置するにはどうすればよいですか?

擬似要素は親の下に配置できますか?

:after 擬似要素を使用して要素をスタイルしようとしていますが、::after 要素は要素自体の上にあるようです:

#element {
    position: relative;
    z-index: 1;
}

#element::after {
    position: relative;
    z-index: 0;
    content: " ";
    position: absolute;
    width: 100px;
    height: 100px;
}

積み重ねを変更できますか擬似要素を親の下に配置するには?

答え: コンテキストの操作の積み重ね

擬似要素は、事実上、親の子要素です。デフォルトのスタック順序を変更し、擬似要素をその親の下に配置するには、新しいスタック コンテキストを確立する必要があります。これは、絶対位置と「自動」ではない Z インデックス値を擬似要素に適用することで実現されます。

#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 */
}

これにより、擬似要素を親要素の背後に配置する新しいスタッキング コンテキストが確立されます。 .

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