Mengapakah `z-index` Tidak Berfungsi Apabila Menggunakan `transform`?

z-index Tidak Berfungsi: Memahami dan Menyelesaikan Isu Kedudukan

Apabila bekerja dengan berbilang elemen diposisikan menggunakan indeks-z, adalah mungkin untuk menghadapi situasi di mana lapisan yang dijangkakan tidak berlaku. Satu isu sedemikian timbul apabila cuba meletakkan elemen di belakang satu lagi yang telah diletakkan menggunakan indeks-z.

Dalam kod yang disediakan, dua cincin dicipta: yang pertama, diletakkan di atas bulatan tanpa bahagian atas, dan yang kedua, di belakang bulatan. Yang terakhir, walaupun mempunyai nilai indeks-z sebanyak -3, kekal di hadapan kerana sifat transformasi yang digunakan padanya.

Penyelesaian terletak pada mengalih keluar sifat transformasi dan menggantikannya dengan alternatif. Berikut ialah kod yang diubah suai:

:root{<br> --size:200px;<br>}</p> <h1>latar belakang {</h1>
<p>lebar:100%;<br> tinggi:100%;<br> kedudukan:mutlak;<br> atas:0;<br> kiri:0;<br> latar belakang: linear-gradient( -23.5deg, #000033, #00001a);<br> z-index:-2;<br>}</p>
<h1>latar belakang #planet utama {</h1>
<p>lebar:var(--saiz);<br> tinggi:var(--saiz);<br> latar belakang:#fff;<br> kedudukan:relatif;<br> atas:calc(50% - var(--saiz)/2);<br> kiri:calc(50% - var(--saiz)/2);<br> jejari sempadan:50%;<br>}</p>
<h1> latar belakang #planet utama:sebelum,#latarbelakang #planet utama:selepas{</h1>
<p>kandungan:"";<br> width:calc(var(--size) * 1.5);<br> height:calc(var(--size) / 2);<br> border:30px solid #000;<br> position:absolute;<br> atas:10px;<br> kiri:-80px;<br> jejari sempadan:50%;<br> transform: rotateX(66deg) rotateY(170deg);<br>}</p>
<h1>latar belakang #planet utama:sebelumnya{</h1>
<p>warna atas sempadan:lutsinar;<br>}</p>
<h1>latar belakang #planet utama:selepas{</h1>
<p>z-index:-3;<br>}

 <div id="background"><br> <div id="mainplanet"><br> </div><br></div>

Dengan pengubahsuaian ini, gelang kedua kini diletakkan dengan betul di belakang bulatan, mempamerkan keberkesanan menggunakan indeks-z untuk memanipulasi objek melapis.

Atas ialah kandungan terperinci Mengapakah `z-index` Tidak Berfungsi Apabila Menggunakan `transform`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html Object using class Property var JS console this position border background transform issue

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk Menggayakan Kandungan InnerHTML dalam Sudut Menggunakan Enkapsulasi Paparan?Artikel seterusnya：Bagaimana untuk Menggayakan Kandungan InnerHTML dalam Sudut Menggunakan Enkapsulasi Paparan?

Artikel berkaitan

Lihat lagi

• Bolehkah Gaya Sebaris `!penting` Ditimpa?
• Mengapa Bekas Peta Google Saya Tidak Dipaparkan pada 100% Lebar dan Tinggi?
• Bagaimana Anda Boleh Memusingkan Kandungan Unsur Pseudo?
• Mengapa Elemen Blok Sebaris Kosong Meningkat Ketinggian Apabila Bekas Disembunyikan?
• Bagaimana untuk Memusatkan Kontena dan Elemen Kanak-Kanak Jajar Kiri dalam Grid Responsif?