Can I Position a CSS Pseudo-element Below Its Parent?

Can Pseudo-Elements Be Positioned Below Their Parent Item?

In CSS styling, pseudo-elements like ::after or ::before are considered descendants of their associated elements. Ordinarily, they appear above their parent element. If you desire to position a pseudo-element beneath its parent, you'll need to establish a new stacking context to alter the default stacking order.

Positioning a pseudo-element as absolute and assigning a non-default z-index value creates the required stacking context. This places the pseudo-element in a separate layer and allows it to overlap other elements, including its parent.

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

In this example, the pseudo-element ::after is absolutely positioned and given a z-index value of -1. This places it behind the parent element #element, as the latter has a default z-index of 0.

The above is the detailed content of Can I Position a CSS Pseudo-element Below Its Parent?. For more information, please follow other related articles on the PHP Chinese website!