Comment positionner un pseudo-élément derrière son parent lorsque le parent a un indice Z ?

Manipulation du Z-Index pour les pseudo-éléments

En CSS, l'application d'un z-index aux éléments parents peut avoir un impact sur le comportement d'empilement des pseudo -éléments. Cet article explore le problème et propose une solution.

Le problème

Lorsqu'un élément parent reçoit un z-index, le pseudo-élément qu'il contient est confiné à l'intérieur le contexte d'empilement du parent. Le pseudo-élément ne peut plus s'étendre en dehors de ce contexte pour apparaître derrière le parent.

Comprendre les contextes d'empilement

La création d'un nouveau contexte d'empilement crée essentiellement une couche distincte pour le élément en question. Les éléments de cette couche sont isolés des éléments extérieurs au contexte. Dans ce cas, le pseudo-élément, qui existe généralement à l'intérieur de la couche parent, est désormais piégé dans le nouveau contexte d'empilement du parent.

La solution

Pour résoudre le problème, CSS permet de sortir d'un contexte d'empilement. Ceci est généralement réalisé en introduisant un nouvel élément avant l'élément parent qui nécessite un ordre d'empilement spécifique. Cet élément « wrapper » forme son propre contexte d'empilement, permettant au pseudo-élément de rester derrière lui tout en affectant l'ordre d'empilement des éléments suivants.

Exemple de code

Considérons le code suivant :

<code class="css"><div id="wrapper">
  <header>
    <span class="pseudo">Hide me!</span>
  </header>
</div>

#wrapper {
  position: relative;
  z-index: 30;
}

header {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: yellow;
}

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

En créant le div "wrapper" et en définissant sa position sur relative et son z-index sur 30, nous établissons un nouveau contexte d'empilement en dehors duquel le pseudo-élément peut exister. Le pseudo-élément peut désormais apparaître derrière l'élément jaune "header", comme prévu.

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!