Comment placer un élément enfant derrière son parent sans utiliser le Z-index ?

Comment positionner l'élément enfant derrière le parent sans index Z

La question

Dans certains scénarios, vous devrez peut-être qu'un élément enfant apparaisse en dessous (ou derrière) son parent, quelle que soit sa position dans l'arborescence DOM. Cependant, la définition de z-index et position: relative ne semble pas produire cet effet.

La solution

Grâce aux progrès de CSS, vous pouvez désormais y parvenir en utilisant les transformations CSS 3D. Voici comment :

 arrière-plan : rouge ;<br> largeur : 100 px ;<br> hauteur : 100 px ; <br> transform-style : préserver-3d ;<br> position : relatif;<br>}</p><p>.child {<br> arrière-plan : bleu;<br> largeur : 100px;<br> hauteur : 100px;<br> position : absolue;<br> haut : -5px ;<br> gauche : -5px;<br> transformation : traduireZ(-10px)<br>}

 Parent<br> <div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Child

Copier après la connexion

< /pre>

Dans ce exemple :

1. Le div parent a la propriété transform-style:preserve-3d, qui permet des transformations 3D pour l'élément et ses enfants.
2. Le div enfant est positionné absolument dans le parent.
3. La propriété transform:translateZ(-10px) sur l'enfant le déplace de 10 pixels vers l'arrière le long du axe z.

En conséquence, l'élément enfant apparaîtra derrière le parent, le superposant sans obscurcir sa vue. Cette technique fonctionne dans tous les navigateurs modernes.

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!