在CSS 中使用Z 索引時,如果它似乎不起作用要工作,第一步是仔細檢查所有元素是否應用了正確的定位。
在這種情況下,問題在於將轉換屬性應用於 :before 和 :after 偽元素#mainplanet 元素的。為了確保這些元素的 Z-index 按預期運作,應刪除 Transform 屬性。
以下是修改後的CSS 程式碼:
<pre class="snippet-code-css lang-css prettyprint-override">:root{
--size:200px;
}
}
背景{
寬度:100%;
高度:100%;
位置:絕對;
上:0 ;
}
背景#主行星{
寬度:var(--size);
高度:var (--size);
背景:#fff;
位置:相對;
頂部:50 %;
}
背景#mainplanet:之前,#background #mainplanet:after{
內容:"";
寬度:calc(var(--size) * 1.5);
高度:calc(var(--size) / 2);
邊框:30px 實心#000;
位置:絕對;頂部:10px; 左:-80px;
邊框半徑:50%;
}
背景#mainplanet:after{
<pre class="snippet-code-html lang-html prettyprint-override"><div id="background">
} pre>
以上是為什麼我的 z-index 不適用於我的 :before 和 :after 偽元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!