Maison > interface Web > tutoriel CSS > le corps du texte

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

Patricia Arquette
Libérer: 2024-10-25 07:02:29
original
805 Les gens l'ont consulté

How Can You Position a Pseudo-Element Behind Its Parent When The Parent Has a Z-Index?

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!