Bagaimanakah Saya Boleh Membuat Elemen Kanak-Kanak Sentiasa Muncul Di Atas Induknya Menggunakan CSS?

Menyusun Semula Elemen Kanak-kanak dengan CSS

Soalan:

Bagaimana kita boleh memastikan elemen kanak-kanak sentiasa muncul di atas induknya, tanpa mengira kedudukan mereka dalam DOM pokok?

Jawapan:

Kemajuan terkini dalam CSS membolehkan kami mencapai ini dengan transformasi CSS.

Dalam penyemak imbas moden, kami boleh menggunakan transformasi- style: preserve-3d dan transform: translateZ(-10px) pada elemen anak untuk menolaknya di belakangnya ibu bapa.

Sampel Kod:

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

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

Penyelesaian ini membolehkan penyusunan semula dinamik elemen anak tanpa menggunakan kedudukan mutlak atau tetap. Ia memastikan elemen kanak-kanak kekal di atas sambil mengekalkan fleksibiliti untuk pelbagai kes penggunaan.

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