Rumah  >  Artikel  >  hujung hadapan web  >  Mengapa Z-Index Tidak Berfungsi pada Pseudo-Elements dengan Transform?

Mengapa Z-Index Tidak Berfungsi pada Pseudo-Elements dengan Transform?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-10-31 09:43:30803semak imbas

Why Doesn't Z-Index Work on Pseudo-Elements with Transform?

Z-Index Tidak Mempengaruhi Lingkaran Luar

Apabila cuba mengalihkan gelang luar di belakang bulatan menggunakan CSS, anda mungkin menghadapi masalah di mana sifat indeks-z nampaknya tidak berkesan. Dalam kes ini, masalahnya terletak pada sifat transformasi yang digunakan pada elemen pseudo.

<code class="css">#background #mainplanet:before,#background #mainplanet:after {
  ...
  transform: rotateX(66deg) rotateY(170deg);
}</code>

Untuk mengatasinya, anda perlu mengalih keluar sifat transformasi dan menggantikannya dengan kaedah penentududukan alternatif, seperti melaraskan koordinat atas dan kiri atau menggunakan kedudukan mutlak dengan nilai yang dikira.

<code class="css">#background #mainplanet:before,#background #mainplanet:after {
  ...
  top: calc(10px - var(--size) / 4);
  left: calc(-80px - var(--size) / 4);
}</code>

Dengan membuat perubahan ini, anda harus mendapatkan semula kawalan ke atas sifat indeks-z dan dapat mengalihkan elemen pseudo di belakang bulatan dengan berkesan seperti yang dimaksudkan.

Atas ialah kandungan terperinci Mengapa Z-Index Tidak Berfungsi pada Pseudo-Elements dengan 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