Maison  >  Article  >  interface Web  >  Pourquoi mon Z-Index ne fonctionne-t-il pas lors de l'utilisation de Transform ?

Pourquoi mon Z-Index ne fonctionne-t-il pas lors de l'utilisation de Transform ?

DDD
DDDoriginal
2024-10-31 18:05:46697parcourir

Why is My Z-Index Not Working When Using Transform?

Z-Index ne fonctionne pas

Problème :

Vous essayez de déplacer un anneau derrière un cercle en utilisant z- index, mais malgré la spécification d'une valeur négative pour le z-index, l'anneau reste devant.

Explication :

Dans ce cas particulier, vous avez appliqué la transformation à le pseudo-élément de la bague. Lorsque la transformation est appliquée, la propriété z-index n'a plus d'effet.

Solution :

Pour résoudre ce problème, vous devez supprimer la propriété transform et remplacer avec une méthode alternative pour positionner l'anneau derrière le cercle.

Extrait de code :

Supprimez la propriété de transformation et spécifiez la position absolue de l'anneau en utilisant haut et gauche propriétés :

<code class="css">#background #mainplanet:after {
  z-index: -3;
  top: calc(50% - var(--size)/2) !important;
  left: calc(50% - (var(--size) * 1.5)/2) !important;
}</code>

Cela garantira que l'anneau est positionné derrière le cercle et que l'index z est efficace.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn