Cara menggunakan melekit dalam kedudukan

Langkah untuk menggunakan sticky in position: 1. Tambahkan atribut "position: sticky" pada elemen; atribut bawah atau kiri untuk menetapkan nilai offset.

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

kedudukan: sticky ialah sifat kedudukan dalam CSS yang membenarkan elemen kekal dalam kedudukan tertentu semasa menatal. Apabila elemen ditatal ke ofset yang ditentukan, ia "berkedudukan melekit" dan kekal pada kedudukan itu sehingga ia ditatal ke ofset lain yang ditentukan.

Untuk menggunakan kedudukan: melekit, langkah berikut diperlukan:

1. Tambahkan kedudukan: atribut melekit pada elemen.

2 Untuk meletakkan elemen yang ditentukan berbanding dengan elemen nenek moyangnya yang terdekat dengan kotak tatal, anda boleh menggunakan atribut atas, kanan, bawah atau kiri untuk menetapkan nilai offset.

Sebagai contoh, berikut ialah contoh menggunakan kedudukan: sticky:

.container {
  height: 400px;
  overflow: auto;
}
.sticky-element {
  position: sticky;
  top: 20px;
  background-color: #f1f1f1;
  padding: 10px;
}

<div class="container">
  <div class="sticky-element">
    这是一个粘性元素
  </div>
  <!-- 其他内容 -->
</div>

Dalam contoh di atas, elemen .sticky-element akan kekal dalam kedudukan itu apabila ditatal ke jarak 20px dari bahagian atas elemen .container.

Sila ambil perhatian bahawa kedudukan: atribut melekat mungkin tidak disokong dalam beberapa versi pelayar lama, jadi ujian keserasian diperlukan apabila menggunakannya.

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