Pourquoi mon z-index ne fonctionne-t-il pas sur mes pseudo-éléments :before et :after ?

J'ai une position mais l'index Z ne fonctionne pas

Lors de l'utilisation de l'index Z en CSS, s'il ne semble pas fonctionner fonctionne, la première étape consiste à vérifier que tous les éléments ont le bon positionnement appliqué.

Dans ce cas, le problème vient de la propriété transform appliquée aux pseudo-éléments :before et :after de l'élément #mainplanet. Pour garantir que Z-index fonctionne comme prévu pour ces éléments, la propriété transform doit être supprimée.

Voici le code CSS modifié :

<pre class="snippet-code-css lang-css prettyprint-override">:root{

--size:200px;
}

arrière-plan {

largeur:100%;
hauteur:100%;
position:absolue;
haut:0 ;
gauche:0;
arrière-plan : dégradé linéaire(-23.5deg, #000033, #00001a);
z-index:-2;
}

arrière-plan # planète principale {

largeur:var(--size);
hauteur:var(--size);
arrière-plan:#fff;
position:relative;
top:50 %;
left:50%;
transform:translate(-50%,-50%);
border-radius:50%;
}

background #mainplanet : avant,#background #mainplanet:après{

content:"";
width:calc(var(--size) * 1.5);
height:calc(var(--size) / 2);
border:30px solid #000;
position:absolute;
top:10px;
left:-80px;
border-radius:50%;
/ Supprimez la propriété de transformation /
}

background #mainplanet:before{

border-top-color:transparent;
}

background #mainplanet:after{

z-index:-3;
}

<pre class="snippet-code-html lang-html prettyprint-override"><div id="background">

Avec ces changements, le Z La propriété -index affectera désormais correctement le positionnement des pseudo-éléments :before et :after, permettant à l'anneau extérieur d'apparaître derrière le cercle de la planète principale.

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!