Les pseudo-éléments CSS peuvent-ils être positionnés sous leur élément parent ?

Ordre d'empilement CSS : les pseudo-éléments peuvent-ils être positionnés sous les éléments parents ?

Lors du style d'un élément à l'aide du pseudo-élément :after, il peut sembler que le pseudo-élément se trouve toujours au-dessus de l'élément parent. En effet, les pseudo-éléments sont intrinsèquement traités comme des descendants de leur élément associé et héritent du même contexte d'empilement.

Solution : Créer un nouveau contexte d'empilement

Pour positionner un pseudo-élément en dessous de son parent, vous devez créer un nouveau contexte d'empilement. Ceci peut être réalisé en positionnant le pseudo-élément de manière absolue et en attribuant une valeur d'index z autre que « auto ».

Considérez le code CSS et HTML suivant :

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

Explication :

• Le div #element reçoit une position relative pour fournir un contexte pour l'absolu positionnement.
• Le pseudo-élément :after est défini avec son contenu et ses dimensions.
• Le pseudo-élément est positionné de manière absolue et se voit attribuer un z-index négatif (-1) pour garantir qu'il est placé sous l'élément parent.

Avec ce nouveau contexte d'empilement, le pseudo-élément :after peut désormais être positionné sous le div #element, quel que soit l'élément parent. l'ordre d'empilement des éléments.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!