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

Susan Sarandon

Libérer： 2024-10-31 20:02:01

original

576 Les gens l'ont consulté

Why is my z-index not working on my :before and :after pseudo-elements?

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{

Copier après la connexion

--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">

Copier après la connexion

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!