## Comment positionner un pseudo-élément `::before` derrière son parent lors de l'utilisation de `z-index` ?

Énigme de l'index Z avec le pseudo-élément Avant

Lors de l'emploi d'un pseudo-élément avant dans un élément parent, il est essentiel d'aborder son comportement de positionnement. Par défaut, le pseudo-élément est positionné à l'intérieur de son parent.

Cependant, l'attribution d'un z-index à l'élément parent crée un nouveau contexte d'empilement, isolant son contenu. Par conséquent, le pseudo-élément before, même avec un z-index négatif, ne peut pas apparaître derrière le parent en raison de la limite du contexte d'empilement.

Pour résoudre ce problème, envisagez la solution suivante :

1. Hiérarchie des éléments séparés : Faites précéder l'élément d'en-tête d'un autre élément. Cela crée un ordre d'empilement naturel dans lequel le nouvel élément parent peut recevoir un z-index inférieur à l'en-tête, permettant au pseudo-élément before d'apparaître derrière lui.
2. Z-Index Nesting : Bien que cela soit moins recommandé, vous pouvez utiliser des valeurs d'index z négatives pour le pseudo-élément et des valeurs positives pour l'élément parent afin de créer l'ordre d'empilement souhaité dans le même contexte d'empilement. Cependant, cette approche peut conduire à un code plus complexe et à des problèmes potentiels de compatibilité entre navigateurs.

Exemple :

<code class="css"><div class="wrapper">
  <header>
    content...
    <span class="pseudo-element">Before content...</span>
  </header>
</div>

.wrapper {
  position: relative;
  z-index: 0;
}

header {
  position: relative;
  background: yellow;
  height: 100px;
  width: 100px;
  z-index: 1;
}

.pseudo-element {
  position: absolute;
  background: red;
  height: 100px;
  width: 100px;
  top: 25px;
  left: 25px;
  z-index: 0;
}</code>

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!