Home >Web Front-end >CSS Tutorial >How Can I Position a Pseudo-Element Below Its Parent Element?

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

DDD
DDDOriginal
2024-12-22 13:12:14210browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn