Rumah > Artikel > hujung hadapan web > Mengapa Z-Index Saya Tidak Berfungsi Apabila Menggunakan Transform?
Masalah:
Anda cuba mengalihkan cincin di belakang bulatan menggunakan z- indeks, tetapi walaupun menyatakan nilai negatif untuk indeks-z, gelang itu kekal di hadapan.
Penjelasan:
Dalam kes ini, anda telah menggunakan transformasi kepada unsur pseudo untuk cincin. Apabila transformasi digunakan, sifat z-index tidak lagi mempunyai kesan.
Penyelesaian:
Untuk menyelesaikan isu ini, anda perlu mengalih keluar sifat transform dan menggantikan ia dengan kaedah alternatif untuk meletakkan cincin di belakang bulatan.
Coretan Kod:
Alih keluar sifat transformasi dan nyatakan kedudukan mutlak untuk cincin menggunakan bahagian atas dan kiri sifat:
<code class="css">#background #mainplanet:after { z-index: -3; top: calc(50% - var(--size)/2) !important; left: calc(50% - (var(--size) * 1.5)/2) !important; }</code>
Ini akan memastikan gelang berada di belakang bulatan dan indeks-z adalah berkesan.
Atas ialah kandungan terperinci Mengapa Z-Index Saya Tidak Berfungsi Apabila Menggunakan Transform?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!