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

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

CSS スタイルでは、::after や ::before のような擬似要素は、それらに関連付けられた要素の子孫とみなされます。要素。通常、これらは親要素の上に表示されます。擬似要素をその親の下に配置したい場合は、新しいスタッキング コンテキストを確立してデフォルトのスタック順序を変更する必要があります。

擬似要素を絶対として配置し、デフォルト以外の z を割り当てる-index 値は、必要なスタッキング コンテキストを作成します。これにより、疑似要素が別のレイヤーに配置され、その親を含む他の要素と重なることができるようになります。

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

この例では、疑似要素 ::after は絶対的に配置され、z- が与えられます。インデックス値 -1。これにより、親要素 #element の後ろに配置されます。これは、親要素のデフォルトの z-index が 0 であるためです。

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