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

Comment superposer un élément enfant derrière son parent à l'aide de Transform 3D

Question :

Comment puis-je m'assurer qu'un l'élément enfant dynamique apparaît toujours devant son élément parent, quelle que soit sa position dans le DOM arbre ?

Réponse :

En utilisant CSS, vous pouvez y parvenir dans les navigateurs modernes avec la propriété transform 3D :

.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);
}

Ce CSS configure l'élément parent avec un style de transformation 3D et positionne l'élément enfant absolument à l'intérieur de celui-ci. La propriété transform:translateZ(-10px) décale l'élément enfant de 10px vers l'arrière le long de l'axe z, lui permettant d'apparaître derrière son parent.

Structure HTML :

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

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!