Warum funktioniert mein Z-Index bei meinen :before- und :after-Pseudoelementen nicht?

Ich habe eine Position, aber der Z-Index funktioniert nicht

Bei Verwendung des Z-Index in CSS, wenn dies nicht der Fall zu sein scheint Um zu funktionieren, besteht der erste Schritt darin, noch einmal zu überprüfen, ob auf alle Elemente die richtige Positionierung angewendet wurde.

In diesem Fall liegt das Problem darin, dass die Transformationseigenschaft auf die Pseudoelemente :before und :after angewendet wird des #mainplanet-Elements. Um sicherzustellen, dass der Z-Index für diese Elemente wie erwartet funktioniert, sollte die Transformationseigenschaft entfernt werden.

Hier ist der geänderte CSS-Code:

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

--size:200px;
}

Hintergrund {

Breite:100 %;
Höhe:100 %;
Position:absolut;
oben:0 ;
left:0;
background: linear-gradient(-23.5deg, #000033, #00001a);
z-index:-2;
}

background # Hauptplanet {

width:var(--size);
height:var(--size);
background:#fff;
position:relative;
top:50 %;
left:50%;
transform:translate(-50%,-50 %);
border-radius:50%;
}

background #mainplanet: before,#background #mainplanet:after{

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%;
/ Entfernen Sie die Transformationseigenschaft /
}

background #mainplanet:before{

border-top-color:transparent;
}

Hintergrund #mainplanet:after{

z-index:-3;
}

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

Mit diesen Änderungen wird das Z Die Eigenschaft -index wirkt sich nun korrekt auf die Positionierung der :before- und :after-Pseudoelemente aus, sodass der äußere Ring hinter dem Hauptplanetenkreis erscheint.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein Z-Index bei meinen :before- und :after-Pseudoelementen nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!