Bagaimanakah Saya Boleh Meletakkan Elemen Kanak-Kanak Di Belakang Induknya Menggunakan CSS Transform 3D?

Cara Bertindih Elemen Kanak-kanak Di Belakang Induknya Menggunakan Transform 3D

Soalan:

Bagaimana saya boleh memastikan bahawa elemen anak dinamik sentiasa muncul di hadapan elemen induknya, tanpa mengira kedudukannya dalam DOM pokok?

Jawapan:

Menggunakan CSS, anda boleh mencapai ini dalam penyemak imbas moden dengan sifat transformasi 3D:

.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);
}

CSS ini mengkonfigurasi elemen induk dengan gaya transformasi 3D dan meletakkan elemen anak secara mutlak di dalamnya. Sifat transform: translateZ(-10px) menganjakkan elemen anak 10px ke belakang di sepanjang paksi z, membolehkannya muncul di belakang induknya.

Struktur HTML:

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

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