How Can I Position a Pseudo-Element Below Its Parent Element?

Can Pseudo-Elements Be Positioned Below Their Parent?

You're attempting to style an element using the :after pseudo-element, but the ::after element appears to be above the element itself:

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

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

Can you alter the stacking order to place the pseudo-element below its parent?

Answer: Stacking Context Manipulation

Pseudo-elements are effectively child elements of their parent. Establishing a new stacking context is necessary to modify the default stacking order and position the pseudo-element below its parent. This is accomplished by applying absolute positioning and a z-index value that is not "auto" to the pseudo-element:

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

This establishes a new stacking context that places the pseudo-element behind its parent element.

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