Rumah > hujung hadapan web > tutorial css > Mengapa Z-Index Saya Tidak Berfungsi Apabila Menggunakan Transform?

Mengapa Z-Index Saya Tidak Berfungsi Apabila Menggunakan Transform?

DDD
Lepaskan: 2024-10-31 18:05:46
asal
794 orang telah melayarinya

Why is My Z-Index Not Working When Using Transform?

Z-Index Tidak Berfungsi

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan