Comment puis-je superposer correctement les éléments parents et enfants à l'aide de Z-Index en CSS ?

Séparation des éléments parents et enfants dans Z-Index

En CSS, la propriété z-index contrôle la superposition des éléments sur une page Web . Cependant, il arrive parfois qu'un élément parent apparaisse derrière son élément enfant malgré un z-index plus élevé en raison de la manière dont CSS gère les contextes d'empilement.

Pour résoudre ce problème, il n'est pas toujours nécessaire d'utiliser un z-index négatif. sur l'élément enfant. Envisagez plutôt la solution suivante :

Supprimez l'index Z du parent et modifiez l'index Z de l'enfant :

Au lieu de définir un index Z sur le parent, supprimez-le et définissez un z-index négatif sur l'enfant. Cela garantit que l'élément enfant reste sous l'élément parent sans le pousser hors du conteneur de page.

Voici un code CSS révisé :

.parent {
  position: relative;
  width: 350px;
  height: 150px;
  background: red;
  border: solid 1px #000;
}
.child {
  position: relative;
  background-color: blue;
  height: 200px;
  z-index: -1;
}

Assurer le positionnement relatif :

Les éléments parent et enfant doivent avoir leur propriété de position définie sur relative ou absolue pour permettre une bonne superposition.

Exemple HTML :

<div class="wrapper">
  <div class="parent">parent 1 parent 1
    <div class="child">child child child</div>
  </div>
  <div class="parent2">parent 2 parent 2</div>
</div>

Cette solution place l'élément parent au-dessus de son enfant sans perturber la mise en page globale de la page ni provoquer de comportement inattendu.

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!