Comment puis-je positionner un pseudo-élément sous son élément parent ?

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

Vous essayez de styliser un élément en utilisant le pseudo-élément :after, mais l'élément ::after semble être au-dessus de l'élément lui-même :

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

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

Pouvez-vous modifier l'ordre d'empilement pour placer le pseudo-élément en dessous de son parent ?

Réponse : Manipulation du contexte d'empilement

Les pseudo-éléments sont effectivement des éléments enfants de leur parent. L'établissement d'un nouveau contexte d'empilement est nécessaire pour modifier l'ordre d'empilement par défaut et positionner le pseudo-élément en dessous de son parent. Ceci est accompli en appliquant un positionnement absolu et une valeur z-index qui n'est pas « auto » au pseudo-élément :

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

Cela établit un nouveau contexte d'empilement qui place le pseudo-élément derrière son élément parent. .

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!