Mengapa `bawah:0` Tidak Menjadikan Elemen `kedudukan:melekit` Saya Melekat Serta-merta?

Mengapa "bottom:0" Nampaknya Tidak Berfungsi dengan Position:Sticky

Apabila cuba menggunakan "bottom:0" dengan "position:sticky," pada mulanya mungkin kelihatan bahawa elemen itu tidak menjadi melekit. Walau bagaimanapun, ini tidak berlaku. Untuk memahami tingkah laku ini, mari kita periksa takrifan "melekit."

Menurut spesifikasi CSS, elemen dengan "position:sticky" kekal pada kedudukan relatif sehingga blok yang mengandunginya melepasi ambang. Dalam senario ini, blok yang mengandungi ialah elemen "blok" merah jambu.

Apabila menetapkan "bottom:0," elemen "move" akan menjadi melekit apabila bahagian bawah blok yang mengandungi kelihatan dalam tetingkap penyemak imbas . Walau bagaimanapun, dalam kod ujian anda, elemen "blok" mempunyai ketinggian 200px dan elemen "gerak" diletakkan di dalamnya. Ini bermakna bahawa secara lalai, elemen "move" telah diletakkan di bahagian bawah kawasan yang boleh dilihat dalam blok yang mengandunginya. Akibatnya, ia tidak pernah mencapai ambang yang diperlukan untuk menjadi melekit.

Untuk menunjukkan cara "bottom:0" berfungsi dengan "position:sticky", kita boleh memberikan margin yang besar kepada elemen "block", bergerak ia di luar skrin. Sebaik sahaja kami mula menatal, kami dapat melihat bahawa elemen "bergerak" mula melekat pada bahagian bawah skrin yang boleh dilihat apabila elemen "sekat" menatal melepasi bahagian atas tetingkap penyemak imbas.

Atas ialah kandungan terperinci Mengapa `bawah:0` Tidak Menjadikan Elemen `kedudukan:melekit` Saya Melekat Serta-merta?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!