Comment puis-je afficher un élément enfant derrière son parent à l'aide de CSS ?

Les problèmes du Z-Index : affichage d'un élément enfant derrière son parent

Obtenir l'effet visuel souhaité en affichant un élément enfant derrière son parent dans le modèle objet du document (DOM ) l’arbre peut être une tâche déroutante. Malgré la mise en œuvre généralisée de la propriété z-index, elle ne parvient parfois pas à produire le résultat attendu.

Une approche fiable pour résoudre ce problème, en particulier dans les navigateurs modernes, consiste à exploiter la propriété de transformation 3D de CSS3. Cette technique a pris de l'importance ces dernières années et fournit une solution de contournement à ce défi de longue date.

.parent {
  background: red;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
}

.child {
  background: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -5px;
  left: -5px;
  transform: translateZ(-10px);
}

Dans cet exemple, l'élément parent reçoit un style de transformation depreserve-3d, qui permet la création d'un contexte de rendu 3D. L'élément enfant est ensuite positionné de manière absolue dans l'élément parent et légèrement décalé par les propriétés supérieure et gauche. Enfin, la transformation : translateZ(-10px) est appliquée à l'enfant, le renvoyant effectivement vers l'arrière dans la dimension Z.

<div class="parent">
  Parent
  <div class="child">
    Child
  </div>
</div>

Cette technique permet à l'élément enfant de chevaucher le parent tout en s'affichant derrière lui, fournissant l’effet visuel souhaité. Il élimine le besoin de positionnement absolu ou fixe, offrant une plus grande flexibilité dans la conception de vos éléments dynamiques.

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!