Bagaimanakah Saya Boleh Memaparkan Elemen Kanak-Kanak Di Belakang Induknya Menggunakan CSS?

Z-Index Woes: Memaparkan Elemen Kanak-kanak Di Belakang Induknya

Mencapai kesan visual yang diingini untuk memaparkan elemen kanak-kanak di belakang induknya dalam model objek dokumen (DOM ) pokok boleh menjadi tugas yang membingungkan. Walaupun pelaksanaan sifat z-index secara meluas, ia kadangkala gagal menghasilkan hasil yang diharapkan.

Satu pendekatan yang boleh dipercayai untuk menangani isu ini, terutamanya dalam penyemak imbas moden, ialah memanfaatkan sifat 3D transformasi CSS3. Teknik ini telah menjadi terkenal sejak beberapa tahun kebelakangan ini dan menyediakan penyelesaian untuk cabaran yang telah lama wujud ini.

.parent {
  background: red;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
}

.child {
  background: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -5px;
  left: -5px;
  transform: translateZ(-10px);
}

Dalam contoh ini, elemen induk diberikan gaya transformasi preserve-3d, yang membolehkan penciptaan konteks pemaparan 3D. Elemen anak kemudian diposisikan sepenuhnya dalam induk dan mengimbangi sedikit melalui sifat atas dan kiri. Akhir sekali, transformasi: translateZ(-10px) digunakan pada kanak-kanak, dengan berkesan menghantarnya ke belakang dalam dimensi Z.

<div class="parent">
  Parent
  <div class="child">
    Child
  </div>
</div>

Teknik ini membolehkan elemen anak bertindih dengan induk sambil masih memaparkan di belakangnya, memberikan kesan visual yang dikehendaki. Ia menghapuskan keperluan untuk kedudukan mutlak atau tetap, menawarkan fleksibiliti yang lebih besar dalam reka bentuk elemen dinamik anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Elemen Kanak-Kanak Di Belakang Induknya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!