Mengapakah indeks-z saya tidak berfungsi pada :before dan :after pseudo-elements saya?

Saya Mempunyai Kedudukan tetapi Indeks Z Tidak Berfungsi

Apabila menggunakan indeks-Z dalam CSS, jika nampaknya tidak berfungsi, langkah pertama ialah menyemak semula bahawa semua elemen mempunyai kedudukan yang betul digunakan.

Dalam kes ini, isu adalah dengan sifat transformasi yang digunakan pada :before dan :after pseudo-elemen unsur #mainplanet. Untuk memastikan Z-index berfungsi seperti yang diharapkan untuk elemen ini, sifat transform harus dialih keluar.

Berikut ialah kod CSS yang diubah suai:

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

--saiz:200px;
}

latar belakang {

lebar:100%;
ketinggian:100%;
kedudukan:mutlak;
atas:0;
kiri:0;
latar belakang: linear-gradient(-23.5deg, #000033, #00001a);
z-index:-2;
}

latar belakang #planet utama {

lebar:var(--saiz);
ketinggian:var(--saiz);
latar belakang:#fff;
kedudukan:relatif;
atas:50%;
kiri:50%;
transform:terjemah(-50% ,-50%);
jejari sempadan:50%;
}

latar belakang #planet utama:sebelum,#latarbelakang #planet utama:selepas{

kandungan:"";
lebar:calc(var(--saiz) * 1.5);
tinggi:calc(var(- -saiz) / 2);
sempadan:30px pepejal #000;
kedudukan:mutlak;
atas:10px;
kiri:-80px;
jejari sempadan:50%;
/ Alih keluar sifat transformasi /
}

latar belakang #planet utama:sebelum{

warna atas sempadan:lutsinar;
}

latar belakang #planet utama:selepas{

z-index:-3;
}

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

Dengan perubahan ini, sifat Z-index kini akan menjejaskan kedudukan :sebelum dan :selepas unsur pseudo dengan betul, membenarkan gelang luar muncul di belakang bulatan planet utama.

Atas ialah kandungan terperinci Mengapakah indeks-z saya tidak berfungsi pada :before dan :after pseudo-elements saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!