Rumah >hujung hadapan web >tutorial css >Mengapakah `z-index` Tidak Berfungsi Apabila Menggunakan `transform`?
Mengapakah `z-index` Tidak Berfungsi Apabila Menggunakan `transform`?
- DDDasal
- 2024-11-01 15:30:04823semak imbas
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!