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

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

Dans le style CSS, les pseudo-éléments comme ::after ou ::before sont considérés comme les descendants de leurs éléments associés. éléments. Habituellement, ils apparaissent au-dessus de leur élément parent. Si vous souhaitez positionner un pseudo-élément sous son parent, vous devrez établir un nouveau contexte d'empilement pour modifier l'ordre d'empilement par défaut.

Positionner un pseudo-élément comme absolu et attribuer un z non par défaut La valeur -index crée le contexte d'empilement requis. Cela place le pseudo-élément dans un calque séparé et lui permet de chevaucher d'autres éléments, y compris son parent.

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

Dans cet exemple, le pseudo-élément ::after est positionné de manière absolue et reçoit un z- valeur d'indice de -1. Cela le place derrière l'élément parent #element, car ce dernier a un z-index par défaut de 0.

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!