Apakah kedudukan melekit?

Kedudukan melekit ialah kaedah penentududukan CSS yang membolehkan elemen kekal dalam kedudukan tertentu pada halaman semasa menatal. Ciri-ciri kedudukan melekit ialah ia boleh menukar kaedah penentududukan, menggabungkan kedudukan relatif dan kedudukan tetap, kedudukan relatif kepada viewport atau bekas, dan mempunyai keserasian yang baik. Kaedah menggunakan kedudukan melekit adalah sangat mudah. ​​Hanya tetapkan atribut kedudukan elemen kepada melekit Anda juga perlu menentukan nilai mengimbangi elemen semasa menatal untuk menentukan kedudukan elemen berbanding dengan port pandangan atau bekas. Dengan menggunakan kedudukan melekit secara rasional, anda boleh memberikan pengalaman pengguna yang lebih baik dan meningkatkan navigasi halaman web.

Sistem pengendalian untuk tutorial ini: sistem Windows 10, komputer DELL G3.

Sticky Positioning ialah kaedah penentududukan CSS yang membolehkan elemen kekal dalam kedudukan tertentu pada halaman semasa menatal. Tidak seperti kaedah penentududukan biasa (kedudukan relatif, kedudukan mutlak dan kedudukan tetap), kedudukan melekit mempunyai beberapa ciri unik.

Ciri-ciri kedudukan melekit adalah seperti berikut:

1 Kaedah kedudukan suis: Kedudukan melekit boleh menukar kaedah kedudukan semasa menatal. Apabila elemen mencapai kedudukan yang ditentukan, ia bertukar kepada kedudukan tetap dan kekal dalam kedudukan itu. Apabila halaman menatal melepasi kedudukan yang ditentukan, elemen meneruskan aliran dokumen biasa.

2 Gabungan kedudukan relatif dan kedudukan tetap: Kedudukan melekit mempunyai ciri-ciri kedudukan relatif, yang boleh menduduki kedudukan dalam aliran dokumen, dan kedudukan tetap, yang boleh ditetapkan pada kedudukan tertentu. pada halaman.

3 Kedudukan relatif kepada port pandangan atau bekas: Kedudukan melekit boleh diletakkan secara relatif kepada port pandangan atau bekas. Apabila ditetapkan kepada kedudukan relatif kepada port pandangan, elemen diletakkan relatif kepada keseluruhan tetingkap apabila ditetapkan kepada kedudukan relatif kepada bekas, elemen diletakkan relatif kepada bekas terdekat dengan mekanisme tatal.

4 Keserasian yang baik: Kedudukan melekit disokong secara meluas dalam penyemak imbas moden, termasuk Chrome, Firefox, Safari dan Edge. Untuk penyemak imbas yang tidak menyokong kedudukan melekit, elemen dipaparkan mengikut aliran dokumen biasa.

Kaedah menggunakan kedudukan melekit adalah sangat mudah Anda hanya perlu menetapkan atribut kedudukan elemen kepada melekit. Pada masa yang sama, anda juga perlu menentukan nilai offset (atas, bawah, kiri, kanan) elemen apabila menatal untuk menentukan kedudukan elemen berbanding dengan viewport atau bekas.

Berikut ialah contoh:

.sticky-element {
  position: sticky;
  top: 20px; /* 元素相对于视口的偏移值 */
}

Dalam contoh di atas, elemen kelas .sticky-element akan ditetapkan kepada kedudukan melekit dan kekal dalam jarak port pandangan semasa menatal Kedudukan 20 piksel teratas.

Kegunaan utama kedudukan melekit termasuk:

1 Bar navigasi tetap: Pastikan bar navigasi di bahagian atas atau bawah halaman apabila halaman menatal, memberikan yang lebih baik. pengalaman navigasi.

2 Sidebar tetap: Pastikan bar sisi pada satu sisi halaman apabila halaman menatal, memudahkan pengguna melihat kandungan yang berkaitan.

3 Penetapan iklan: Betulkan kedudukan iklan untuk memastikan iklan sentiasa kelihatan dan meningkatkan kadar pendedahan iklan.

4 Kotak gesaan terapung: Buat kotak gesaan terapung untuk memberikan petua, panduan atau maklumat penting kepada pengguna.

5 Navigasi penomboran: Navigasi berpenomboran tetap untuk memudahkan pengguna bertukar antara halaman atau kandungan yang berbeza.

6 Pengepala tetap: Simpan pengepala jadual di bahagian atas halaman apabila kandungan jadual ditatal, meningkatkan kebolehbacaan jadual.

Ringkasnya, kedudukan melekit ialah kaedah penentududukan CSS yang sangat praktikal yang boleh membetulkan kedudukan elemen semasa menatal. Dengan menggunakan kedudukan melekit secara rasional, anda boleh memberikan pengalaman pengguna yang lebih baik dan meningkatkan navigasi, kebolehbacaan dan interaktiviti halaman web.

Atas ialah kandungan terperinci Apakah kedudukan melekit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!