Pourquoi `translate3d` rompt-il mon ordre CSS `z-index` et comment puis-je y remédier ?

Maintien de l'ordre CSS Z-Index après WebKit Transform Translate3d

Dans le développement Web, l'ordre d'empilement est crucial pour créer la hiérarchie visuelle souhaitée. Z-index, une propriété CSS, joue un rôle important dans le contrôle de cet ordre. Cependant, il peut se comporter de manière inattendue après l'application de certaines transformations, telles que WebKit transform Translate3d.

Le problème

Considérons deux éléments DIV superposés en position absolue avec des valeurs d'index z différentes. . Lorsque vous animez ces éléments hors de l'écran à l'aide de translate3d, ils perdent souvent leur ordre d'empilement prévu lors de leur retour à l'écran.

La cause

Ce comportement découle de la transformation WebKit Translate3D éléments mobiles dans la troisième dimension (axe z). Par conséquent, le navigateur ne peut plus s'appuyer sur la propriété z-index pour déterminer l'ordre d'empilement.

La solution

Pour conserver l'ordre d'empilement après translation3d, vous peut utiliser la technique suivante :

1. Utiliser le style de transformation : plat :

   • Appliquer le style de transformation : plat ; aux éléments enfants dans l'élément parent transformé. Cela oblige le navigateur à restituer les éléments enfants dans un plan 2D, respectant ainsi les valeurs de l'index z.

Considérations supplémentaires

• La propriété transform-style n'est pas prise en charge par tous les navigateurs, elle peut donc nécessiter des informations supplémentaires spécifiques au navigateur. solutions de contournement.
• Cette solution n'affecte pas l'ordre d'empilement de l'élément transformé lui-même, uniquement ses éléments enfants.
• Pour vérifier le comportement souhaité, testez le code sur différents appareils et navigateurs.

En comprenant l'impact de WebKit transform Translate3d sur z-index et en mettant en œuvre les techniques appropriées, les développeurs Web peuvent garder le contrôle sur l'ordre d'empilement de leurs éléments, garantissant ainsi une cohérence. et une expérience utilisateur prévisible.

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!