Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Meletakkan Elemen Kanak-Kanak Di Belakang Induknya Menggunakan CSS Transform 3D?

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

Patricia Arquette
Lepaskan: 2024-11-30 03:51:12
asal
591 orang telah melayarinya

How Can I Position a Child Element Behind Its Parent Using 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);
}
Salin selepas log masuk

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>
Salin selepas log masuk

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!

Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan