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

擬似要素を親要素の下に配置する

CSS では、通常、擬似要素は親要素を基準にして配置されます。ただし、z-index 値を使用してそれらを親の下に配置しようとしても効果がないと思われる場合があります。

擬似要素のスタッキング コンテキストの作成

この制限を克服するには、擬似要素を-要素は新しいスタッキング コンテキスト内に配置する必要があります。これは、次の方法で実現されます。

• 擬似要素の位置プロパティを絶対または固定に設定します。
• 擬似要素に非自動値を割り当てます。 z-index.

例:

次のコードを考えてみましょう:

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

最初に、 #element::after pseudo -要素はその親要素の上に配置されます。この順序を変更するには:

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

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;
    
    /* Positioning and creating a stacking context */
    position: absolute;
    z-index: -1;
}

position:Absolute と z-index:-1 を擬似要素に追加することで、新しいスタッキング コンテキストが作成されます。これにより、コンテキスト内での相対位置を維持しながら、擬似要素が親要素の下に移動します。

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