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

Positionnement des pseudo-éléments sous leur élément parent

En CSS, les pseudo-éléments sont généralement positionnés par rapport à leur élément parent. Cependant, les tentatives visant à les placer en dessous de leur parent à l'aide de valeurs d'index z peuvent sembler inefficaces.

Création d'un contexte d'empilement pour les pseudo-éléments

Pour surmonter cette limitation, pseudo -les éléments doivent être positionnés dans un nouveau contexte d'empilement. Ceci est réalisé en :

• Définir la propriété de position sur absolue ou fixe pour le pseudo-élément.
• Attribuer une valeur non automatique au z-index du pseudo-élément.

Exemple :

Considérez ce qui suit code:

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

Initialement, le pseudo-élément #element::after est positionné au-dessus de son élément parent. Pour modifier cet ordre :

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

En ajoutant position: Absolute et z-index: -1 au pseudo-élément, un nouveau contexte d'empilement est créé. Cela déplace le pseudo-élément sous son élément parent tout en conservant sa position relative dans le contexte.

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!