Comment CSS peut-il transformer l'ordre d'empilement des éléments frères et sœurs inversés en 3D ?

Comment réaliser l'inversion de l'ordre d'empilement des éléments frères et sœurs à l'aide de CSS et de Transform 3D

Comprenant le problème, vous souhaitez vous assurer qu'un élément enfant est cohérent apparaît derrière son parent quelle que soit sa position dans l'arborescence DOM. Bien que l'indexation z puisse sembler une solution appropriée, elle s'avère souvent inefficace dans de tels scénarios.

Pour relever ce défi et obtenir l'inversion de l'ordre d'empilement souhaitée, les navigateurs modernes proposent désormais une technique puissante utilisant la transformation 3D. et CSS.

Considérez le CSS ci-dessous extrait :

.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 se voit attribuer un fond rouge et des dimensions de 100 px sur 100 px. Il est positionné de manière relative et utilise la propriété transform-style:preserve-3d pour créer un contexte d'empilement 3D.

L'élément enfant, en revanche, reçoit un fond bleu et les mêmes dimensions. Il est positionné absolument à l'intérieur du parent, avec de légers décalages négatifs en haut et à gauche. Surtout, une propriété transform:translateZ(-10px) lui est attribuée, qui le décale de 10px le long de l'axe z dans l'espace 3D créé par la propriété transform-style du parent.

En conséquence, malgré son position dans l'arborescence DOM, l'élément enfant apparaît effectivement derrière son parent en raison de sa translation négative sur l'axe z. Cette technique inverse efficacement l'ordre d'empilement, garantissant que l'enfant reste derrière le parent à tout moment.

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!