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

Positioning Pseudo-Elements Beneath Their Parent Element

In CSS, pseudo-elements are typically positioned relative to their parent element. However, attempts to place them below their parent using z-index values may seem ineffective.

Creating a Stacking Context for Pseudo-Elements

To overcome this limitation, pseudo-elements must be positioned within a new stacking context. This is achieved by:

• Setting the position property to absolute or fixed for the pseudo-element.
• Assigning a non-auto value to the pseudo-element's z-index.

Example:

Consider the following code:

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

Initially, the #element::after pseudo-element is positioned above its parent element. To change this order:

#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;
}

By adding position: absolute and z-index: -1 to the pseudo-element, a new stacking context is created. This shifts the pseudo-element below its parent element while maintaining its relative position within the context.

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