Rumah >hujung hadapan web >tutorial css >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:
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!