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

L'ordre d'empilement des pseudo-éléments peut-il aller en dessous de leur parent ?

En CSS, les pseudo-éléments :after et :before apparaissent après et avant le contenu de l'élément associé . Alors que l'ordre d'empilement par défaut place les pseudo-éléments au-dessus de leur parent, certains scénarios nécessitent une inversion.

Problème :

Tentative de définition de la propriété z-index d'un pseudo -un élément en dessous de celui de son élément parent le fait souvent apparaître au-dessus à la place.

Solution :

Pour placer un pseudo-élément sous son parent, créez un nouveau contexte d'empilement.

1. Positionnement absolu : Définition du pseudo-élément en position : absolu établit un nouveau contexte d'empilement, activant le z-index contrôle.
2. Affectation de l'index Z : Attribuez une valeur d'index z inférieure à l'index z du parent pour positionner le pseudo-élément en dessous.

Exemple :

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

Cette approche fournit un contrôle précis sur l'empilement ordre, vous permettant d'obtenir la position souhaitée des pseudo-éléments par rapport à leur parent associé.

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!