Pourquoi le Z-Index ne fonctionne-t-il pas sur les pseudo-éléments avec transformation ?

L'index Z n'affecte pas l'anneau extérieur

Lorsque vous essayez de déplacer un anneau extérieur derrière un cercle à l'aide de CSS, vous pouvez rencontrer un problème où la propriété z-index semble inefficace. Dans ce cas, le problème réside dans l'application de la propriété transform aux pseudo-éléments.

<code class="css">#background #mainplanet:before,#background #mainplanet:after {
  ...
  transform: rotateX(66deg) rotateY(170deg);
}</code>

Pour résoudre ce problème, vous devez supprimer la propriété transform et la remplacer par des méthodes de positionnement alternatives, telles que l'ajustement les coordonnées haut et gauche ou en utilisant un positionnement absolu avec des valeurs calculées.

<code class="css">#background #mainplanet:before,#background #mainplanet:after {
  ...
  top: calc(10px - var(--size) / 4);
  left: calc(-80px - var(--size) / 4);
}</code>

En effectuant ces modifications, vous devriez reprendre le contrôle de la propriété z-index et pouvoir déplacer efficacement le pseudo-élément derrière le cercle comme prévu.

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!