Rumah  >  Artikel  >  hujung hadapan web  >  Mengapakah `z-index` Tidak Berfungsi Apabila Menggunakan `transform`?

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

DDD
DDDasal
2024-11-01 15:30:04770semak imbas

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!

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