Apakah kedudukan melekit

Kedudukan melekat ialah sifat CSS yang digunakan untuk mengawal gelagat kedudukan elemen semasa menatal. Ia diposisikan secara relatif kepada port pandangan atau bekas Apabila halaman menatal, elemen boleh dibetulkan pada kedudukan tertentu pada halaman, memberikan pengalaman pengguna yang lebih baik. Kedudukan melekit mempunyai pelbagai senario aplikasi, dan amat sesuai untuk elemen yang perlu mengekalkan kedudukan tetap apabila halaman ditatal, seperti bar navigasi, bar sisi, sepanduk pengiklanan, kotak gesaan, dsb. Dengan menggunakan kedudukan melekit, anda boleh memberikan pengalaman pengguna yang lebih baik dengan menjadikan elemen ini sentiasa kelihatan, menjadikannya lebih mudah bagi pengguna untuk beroperasi dan menavigasi.

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

Sticky Positioning ialah sifat CSS yang digunakan untuk mengawal gelagat kedudukan elemen semasa menatal. Ia diposisikan secara relatif kepada port pandangan atau bekas Apabila halaman menatal, elemen boleh dibetulkan pada kedudukan tertentu pada halaman, memberikan pengalaman pengguna yang lebih baik.

Kedudukan melekit adalah berbeza daripada kaedah kedudukan biasa yang lain (seperti kedudukan relatif, kedudukan mutlak dan kedudukan tetap). Kedudukan relatif adalah kedudukan relatif kepada kedudukan asal elemen itu sendiri, kedudukan mutlak adalah kedudukan relatif kepada unsur nenek moyang kedudukan terdekat, dan kedudukan tetap adalah kedudukan relatif kepada viewport. Kedudukan melekit menukar kaedah penentududukan semasa menatal Ia boleh diletakkan secara relatif kepada port pandangan atau relatif kepada bekas.

Penggunaan sticky positioning sangat mudah, cuma setkan atribut position elemen kepada sticky. 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 .elemen melekit akan ditetapkan kepada kedudukan melekit dan kekal pada kedudukan 20 piksel dari bahagian atas port pandangan semasa menatal.

Ciri utama kedudukan melekit adalah seperti berikut:

1 Tukar mod kedudukan: Apabila elemen mencapai kedudukan yang ditentukan semasa menatal, ia akan bertukar kepada kedudukan tetap dan kekal pada 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 berbanding dengan port pandangan atau bekas: Kedudukan melekit boleh diposisikan berbanding dengan 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.

Senario aplikasi kedudukan melekit sangat luas, terutamanya sesuai untuk elemen yang perlu mengekalkan kedudukan tetap apabila halaman ditatal, seperti bar navigasi, bar sisi, sepanduk pengiklanan, kotak gesaan, dsb. Dengan menggunakan kedudukan melekit, anda boleh memberikan pengalaman pengguna yang lebih baik dengan menjadikan elemen ini sentiasa kelihatan, menjadikannya lebih mudah bagi pengguna untuk beroperasi dan menavigasi.

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