首頁 > web前端 > css教學 > 主體

為什麼我的 z-index 不適用於我的 :before 和 :after 偽元素?

Susan Sarandon
發布: 2024-10-31 20:02:01
原創
492 人瀏覽過

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

我有位置,但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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!