Mengapakah `z-index` Tidak Berfungsi Apabila Menggunakan `transform`?-tutorial css-php.cn

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

DDD

Lepaskan： 2024-11-01 15:30:04

asal

890 orang telah melayarinya

Why Doesn't `z-index` Work When Using `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!

Artikel sebelumnya：Bagaimana untuk Menggayakan Kandungan InnerHTML dalam Sudut Menggunakan Enkapsulasi Paparan? Artikel seterusnya：Bagaimanakah Saya Boleh Membetulkan Baris dan Lajur Pertama Jadual Boleh Tatal dengan JavaScript?

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

Artikel terbaru oleh pengarang