Rumah > Artikel > hujung hadapan web > Mengapakah indeks-z saya tidak berfungsi pada :before dan :after pseudo-elements saya?
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;
}
lebar:100%;
ketinggian:100%;
kedudukan:mutlak;
atas:0;
kiri:0;
latar belakang: linear-gradient(-23.5deg, #000033, #00001a);
z-index:-2;
}
lebar:var(--saiz);
ketinggian:var(--saiz);
latar belakang:#fff;
kedudukan:relatif;
atas:50%;
kiri:50%;
transform:terjemah(-50% ,-50%);
jejari sempadan:50%;
}
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 /
}
warna atas sempadan:lutsinar;
}
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!