Ciri kedudukan melekit ialah kaedah reka letak halaman biasa, yang boleh mengekalkan elemen tetap pada kedudukan tertentu pada halaman semasa menatal dan tidak terjejas oleh tindakan menatal. Reka letak ini sangat berguna dalam melaksanakan menu navigasi dan mengekalkan keterlihatan elemen tetap pada halaman. Berikut akan memperkenalkan ciri-ciri kedudukan melekit dan contoh kod khusus.
Ciri-ciri kedudukan melekit terutamanya termasuk perkara berikut:
Berikut ialah contoh kod kedudukan melekit khusus untuk mencapai kesan tetap menu navigasi.
Kod HTML:
<!DOCTYPE html> <html> <head> <title>粘性定位代码示例</title> <style> body { margin: 0; } header { height: 50px; background: #f0f0f0; } nav { position: sticky; top: 0; background: #fff; } nav ul { margin: 0; padding: 0; list-style: none; display: flex; } nav li { margin-right: 10px; } main { height: 2000px; padding-top: 50px; } </style> </head> <body> <header> <nav> <ul> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> <li><a href="#">菜单4</a></li> </ul> </nav> </header> <main> <!-- 页面内容 --> </main> </body> </html>
Dalam kod di atas, position: sticky;
来设置粘性定位,top: 0;
表示将导航菜单固定在页面的顶部位置。nav ul
和nav li
digunakan untuk menggayakan menu.
Dalam penggunaan sebenar, ciri-ciri kedudukan melekit boleh digunakan untuk melaksanakan susun atur yang lebih kompleks, seperti butang kembali ke atas tetap, bar alat berlegar di tepi skrin, dsb.
Ringkasnya, ciri kedudukan melekit ialah elemen kekal pada kedudukan tertentu pada halaman semasa menatal, dan mempunyai ciri kekal, berkaitan dengan elemen kedudukan dan membatalkan secara automatik. Dengan menggunakan kedudukan melekit secara rasional, kami boleh mencapai kesan susun atur halaman yang lebih fleksibel dan menarik.
Atas ialah kandungan terperinci Apakah ciri-ciri kedudukan melekit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!