Mengapa Elemen Melekit Saya dengan `bawah: 0` Tidak Kelihatan Melekat?

Memahami Kedudukan Melekit CSS dan Gelagatnya dengan bahagian atas dan bawah

Kedudukan melekit CSS membolehkan elemen kekal tetap dalam blok yang mengandunginya sehingga ambang tertentu dipalang, di mana ia kemudiannya menjadi kedudukan yang agak. Walau bagaimanapun, nampaknya terdapat percanggahan apabila menggunakan 'bawah: 0' dengan unsur melekit.

Penjelasan Masalah:

Pertimbangkan kod berikut:

<div class="block">
  <div class="move">
  </div>
</div>

.block {
  background: pink;
  width: 50%;
  height: 200px;
}

.move {
  position: sticky;
  bottom: 0;
}

Apabila 'move' ditetapkan kepada 'top:0', ia melekat pada bahagian atas merah jambu blok, berkelakuan seperti yang diharapkan. Walau bagaimanapun, apabila 'move' ditetapkan kepada 'bottom:0', ia kelihatan tertanggal dan tidak lagi kekal.

Memahami gelagat 'bottom: 0' dengan unsur melekit:

Untuk memahami tingkah laku ini, adalah penting untuk memahami definisi melekit kedudukan:

A stickily positioned element remains relatively positioned until its containing block crosses a specified threshold (such as setting 'top' to a value other than 'auto'), after which it becomes 'stuck' until meeting the opposite edge of its containing block.

Dalam kes 'bawah: 0', unsur melekit tidak kelihatan kerana ia melekat pada tepi bawah blok yang mengandunginya. Apabila kedudukan tatal melepasi ambang, blok yang mengandungi bergerak ke atas, tetapi elemen melekit kekal di tepi bawah. Memandangkan elemen melekit sudah berada di bahagian bawah, ia tidak boleh bergerak lebih jauh ke atas.

Untuk memerhati kelakuan melekit, pastikan bongkah yang mengandungi mempunyai ketinggian yang mencukupi untuk menampung elemen melekit. Dengan memberikan margin atas yang ketara pada elemen blok, anda boleh menatal halaman dan melihat elemen melekit melekat pada bahagian bawah

Atas ialah kandungan terperinci Mengapa Elemen Melekit Saya dengan `bawah: 0` Tidak Kelihatan Melekat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!