Apakah ciri-ciri kedudukan melekit?-html tutorial-php.cn

Apakah ciri-ciri kedudukan melekit?

WBOY

Lepaskan： 2024-02-19 12:37:22

asal

453 orang telah melayarinya

Apakah ciri-ciri kedudukan melekit?

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:

Elemen sentiasa kekal pada kedudukan yang ditentukan: Tidak kira bagaimana halaman itu ditatal, elemen kedudukan melekit akan tetap pada kedudukan yang ditentukan dan tidak akan bergerak atau hilang kerana menatal.
Tingkah laku yang berkaitan dengan elemen kedudukan: Elemen kedudukan melekit diletakkan secara relatif kepada elemen induknya atau titik rujukan dalam dokumen, jadi gelagatnya akan dipengaruhi oleh elemen ini.
Mempunyai ciri pembatalan automatik: apabila menatal ke kedudukan yang ditentukan atau melepasi julat tertentu, elemen kedudukan melekit akan secara automatik membatalkan kedudukan melekit, iaitu, kembali ke susun atur biasa.

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>

Salin selepas log masuk

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!