為什麼我的 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 {

border-top-color:transparent;

}

背景#mainplanet:after{

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

z-index:-3;

} pre>

透過這些更改，Z -index 屬性現在將正確影響:before 和:after 偽元素的定位，允許外環出現在主行星圓的後面。

以上是為什麼我的 z-index 不適用於我的 :before 和 :after 偽元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！