Mengapakah `kedudukan: melekit` dengan `bawah: 0` Berkelakuan Bertentangan dengan Penerangan MDN?

Langkah Bertentangan dengan kedudukan: melekit dengan bahagian bawah: 0

Apabila menyatakan kedudukan: melekit dengan bahagian bawah: 0, ia berkelakuan berbeza daripada definisi disediakan oleh MDN. Berbeza dengan perihalan, apabila elemen pada mulanya dianggap sebagai kedudukan relatif sehingga ia melebihi ambang dan menjadi tetap, perkara sebaliknya berlaku dengan bawah: 0 ditentukan.

Dalam contoh kod yang disediakan:

<footer>
  <div class="footer"></div>
</footer>

footer {
  position: sticky;
  bottom: 0;
}

MDN menyatakan bahawa elemen pengaki harus terlebih dahulu diposisikan secara relatif sehingga ia bergerak kurang daripada 0px dari bahagian bawah port pandangan. Walau bagaimanapun, tingkah laku yang diperhatikan adalah sebaliknya:

• Apabila menatal ke bawah: Pengaki bermula sebagai kedudukan tetap, kemudian menjadi agak kedudukan apabila bahagian bawah pengaki mencapai 0px dari bawah daripada port pandangan.
• Apabila menatal ke atas: Pengaki bermula secara relatif diposisikan, kemudian menjadi kedudukan tetap apabila bahagian bawah pengaki bergerak melepasi 0px dari bahagian bawah port pandangan.

Sebab untuk Kelakuan Bertentangan

Kuncinya untuk memahami tingkah laku ini terletak pada perkataan definisi MDN: "diperlakukan sebagai elemen kedudukan relatif sehingga ambang yang ditentukan telah melebihi."

Ini bermakna kedudukan awal ditentukan oleh struktur HTML dan jarak ke ambang yang ditentukan. Dalam kes bawah: 0, pengaki sudah berada di bahagian bawah port pandangan apabila halaman dimuatkan. Oleh itu, ia bermula dalam keadaan "tetap" kerana ambang (0px dari bawah) sudah melebihi.

Kesimpulan

Oleh itu, apabila menyatakan kedudukan: melekat dengan bawah: 0, elemen pada mulanya akan ditetapkan kedudukannya dan beralih kepada kedudukan relatif apabila elemen bergerak melepasi bahagian bawah port pandangan. Tingkah laku ini bertentangan dengan tingkah laku yang diterangkan dalam dokumentasi MDN kerana kedudukan awal ditentukan oleh struktur HTML dan kedekatan dengan ambang yang ditentukan.

Atas ialah kandungan terperinci Mengapakah `kedudukan: melekit` dengan `bawah: 0` Berkelakuan Bertentangan dengan Penerangan MDN?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!