Mengapa Elemen Bawah Melekit Saya Tidak Melekat?

Kedudukan Melekit dan Kelakuannya

Apabila bekerja dengan kedudukan CSS, 'kedudukan: melekit;' hartanah menawarkan tingkah laku yang unik. Ia membenarkan elemen kekal tetap dalam bekasnya sehingga ia mencapai ambang tertentu. Satu salah faham biasa melibatkan penggunaan 'bawah: 0'.

Isu:

Dalam kod contoh yang disediakan, blok merah jambu mengandungi blok berwarna biru dengan 'kedudukan : melekit; bawah: 0'. Walau bagaimanapun, blok biru itu nampaknya tidak melekat pada bahagian bawah bekasnya.

Penyelesaian:

Anehnya, kod itu berfungsi dengan betul. Takrifan gelagat 'melekit' CSS menerangkan:

"Elemen yang diposisikan melekit kekal pada kedudukan yang relatif sehingga blok yang mengandunginya melepasi ambang tertentu dalam akar alirannya."

Dalam kes ini, warna biru blok menjadi tetap hanya apabila pengguna menatal halaman sehingga blok merah jambu bertindih dengan bahagian bawah viewport.

Demonstrasi Eksperimen:

Untuk mencipta kesan yang lebih jelas, tetapkan nilai atas margin yang besar pada blok merah jambu dan amati sambil anda menatal perlahan-lahan. Blok biru akan mula melekat pada bahagian bawah apabila blok merah jambu mencapai bahagian bawah kawasan yang boleh dilihat pada halaman.

Dengan memahami cara CSS 'melekit' berfungsi, anda boleh menggunakannya dengan berkesan untuk mencipta reka letak yang lebih dinamik yang melaraskan dan kekal kelihatan sepanjang pengalaman menatal.

Atas ialah kandungan terperinci Mengapa Elemen Bawah Melekit Saya Tidak Melekat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!