Rumah >hujung hadapan web >tutorial css >Mengapa 'kedudukan: melekit' tidak berfungsi apabila saya menentukan 'tinggi'?

Mengapa 'kedudukan: melekit' tidak berfungsi apabila saya menentukan 'tinggi'?

Linda Hamilton
Linda Hamiltonasal
2024-11-27 11:57:11831semak imbas

Why is 'position: sticky' not working when I define a 'height'?

'kedudukan: melekit' tidak berfungsi apabila 'ketinggian' ditentukan

Ramai pembangun web sering menghadapi masalah apabila cuba membuat elemen melekit menggunakan CSS. Dalam kes ini, isu timbul apabila menetapkan ketinggian tetap untuk elemen. Masalah ini boleh dihadapi dalam keadaan seperti melaksanakan pengaki berterusan pada halaman pendaratan atau lajur pada bar sisi.

Penyelesaian terletak pada memahami cara sifat 'kedudukan: melekit' berfungsi. Menurut spesifikasi CSS, elemen dengan sifat ini diposisikan secara relatif sehingga mencapai ambang yang ditentukan, di mana ia menjadi "terperangkap" sehingga ia mencapai tepi bertentangan blok yang mengandungi.

Blok yang mengandungi ialah pada asasnya unsur induk objek melekit. Dalam reka bentuk web, teg 'badan' sering menjadi blok yang mengandungi ini kerana ketinggiannya yang fleksibel. Walau bagaimanapun, apabila ketinggian tertentu digunakan pada badan atau mana-mana bekas perantaraan, ia mewujudkan situasi limpahan untuk kandungan halaman web.

Dalam contoh yang diberikan, badan ditetapkan kepada ketinggian 100% dan kedua-dua kandungan utama dan pengaki diberi ketinggian tetap masing-masing 92% dan 8%. Reka letak ini menjadikannya supaya pengaki sudah berada di tepi bertentangan blok kandungannya, menghalang kedudukan melekit daripada berkuat kuasa.

Untuk menyelesaikan isu ini, elakkan menetapkan ketinggian tetap untuk badan atau bekas induk dan sebaliknya gunakan nilai fleksibel seperti peratusan atau unit port pandang. Ini membolehkan penyemak imbas menentukan ketinggian sebenar berdasarkan kandungan dan saiz tetingkap, memastikan elemen melekit boleh berfungsi dengan betul.

Atas ialah kandungan terperinci Mengapa 'kedudukan: melekit' tidak berfungsi apabila saya menentukan 'tinggi'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn