Mengapa 'kedudukan: melekit' Tidak Berfungsi Dengan Ketinggian Elemen Ditentukan?

'kedudukan: melekit' Tidak Berfungsi Apabila 'tinggi' Ditakrifkan

Memahami Kedudukan Melekit

Kedudukan melekit, sebagai ditakrifkan oleh CSS, beroperasi dalam akar aliran (biasanya port pandangan penyemak imbas atau bekas boleh tatal) dan membolehkan elemen kekal tetap berbanding persekitarannya sehingga syarat tertentu dipenuhi. Apabila elemen menemui ambang yang ditentukan (cth., offset atas dari port pandangan), ia menjadi "terperangkap" di tempatnya sehingga ia mencapai tepi bertentangan blok kandungannya.

Limpahan Menjejaskan Fungsi Melekit

Dalam senario yang diberikan, apabila 'kedudukan: melekit' digunakan pada elemen, tetapi gelagatnya tidak seperti yang diharapkan, adalah penting untuk mempertimbangkan blok yang mengandungi elemen dan sebarang limpahan yang mungkin ada.

Perhubungan Elemen dan Mengandungi Blok

Dalam kod yang disediakan, elemen dengan 'position: sticky' (#footerNav) mempunyai blok yang mengandungi ditetapkan sebagai 'html, body' . Memandangkan CSS mentakrifkan 'html, body { height: 100% }', keseluruhan viewport menjadi blok yang mengandungi.

Isu Limpahan

Walau bagaimanapun, sejak #main div mempunyai sifat 'height: 92%', manakala #footerNav mempunyai 'height: 8%', kandungan melimpah melebihi nilai 'height' yang digabungkan. Limpahan ini mencipta blok berisi lanjutan, membenarkan elemen melekit mencapai tepi bertentangan dengan awal (iaitu, di bahagian bawah #utama). Akibatnya, elemen melekit kelihatan tetap di hujung #utama dan bukannya kekal tersekat sehingga ia mencapai bahagian bawah tetingkap penyemak imbas.

Penyelesaian

Untuk menyelesaikan isunya, seseorang boleh mengalih keluar sekatan ketinggian pada elemen #utama, membenarkan kandungan melimpah secara semula jadi. Ini memastikan bekas tatal kekal sebagai keseluruhan port pandangan, dan elemen melekit berfungsi seperti yang diharapkan, kekal tersekat sehingga ia mencapai bahagian bawah halaman yang sebenar.

Atas ialah kandungan terperinci Mengapa 'kedudukan: melekit' Tidak Berfungsi Dengan Ketinggian Elemen Ditentukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!