Pourquoi mon Z-Index ne fonctionne-t-il pas lors de l'utilisation de 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!