为什么我的 z-index 不适用于我的 :before 和 :after 伪元素？

我有位置，但 Z 索引不起作用

在 CSS 中使用 Z 索引时，如果它似乎不起作用要工作，第一步是仔细检查所有元素是否应用了正确的定位。

在这种情况下，问题在于将转换属性应用于 :before 和 :after 伪元素#mainplanet 元素的。为了确保这些元素的 Z-index 按预期工作，应删除 Transform 属性。

以下是修改后的 CSS 代码：

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

--size:200px;
}

背景{

宽度:100%;
高度:100%;
位置:绝对;
顶部:0 ;
左：0;
背景：线性渐变(-23.5deg, #000033, #00001a);
z 索引:-2;
}

背景 #主行星 {

宽度:var(--size);
高度:var(--size);
背景:#fff;
位置:相对;
顶部:50 %;
左:50%;
变换:平移(-50%,-50%);
边框半径:50%;
}

背景 #mainplanet:之前,#background #mainplanet:after{

内容:"";
宽度:calc(var(--size) * 1.5);
高度:calc(var(--size) / 2);
边框:30px 实心 #000;
位置:绝对;
顶部:10px;
左:-80px;
边框半径:50%;
/ 删除变换属性 /
}

background #mainplanet:before{

border-top-color:transparent;
}

背景 #mainplanet:after{

z-index:-3;
}

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

通过这些更改，Z -index 属性现在将正确影响 :before 和 :after 伪元素的定位，允许外环出现在主行星圆的后面。