Mengapa Adakah Tingkah Laku `limpahan: tersembunyi` Memecahkan `kedudukan: melekit?

Mengapa limpahan:tersembunyi Boleh Mengganggu kedudukan:Kelakuan melekit

Dalam pembangunan web, position:sticky membenarkan elemen kekal kelihatan dan diletakkan dalam bekasnya sementara pengguna menatal bekas induk atau port pandangan. Walau bagaimanapun, apabila bekas telah digunakan limpahan:hidden, ia mungkin menghalang position:sticky daripada berfungsi seperti yang dimaksudkan.

Masalah Asal:

Pertimbangkan kod HTML berikut:

<div class="parent">
  <div class="sticky">
    ...
  </div>
</div>

Elemen melekit akan kekal kelihatan dan diletakkan dalam div induk sebagai pengguna skrol.

Isu Limpahan:

Jika anda menambah limpahan:tersembunyi pada div induk, elemen melekit tidak lagi akan melekat pada bahagian atas bekas dan akan menatal daripada view.

<div class="parent">
  <div class="sticky">
    ...
  </div>
</div>

Punca:

limpahan:tersembunyi menyembunyikan sebarang kandungan yang melangkaui sempadan bekasnya. Ini termasuk elemen melekit apabila ia diletakkan di luar kawasan kelihatan bekas.

Penyelesaian:

Untuk mengelakkan limpahan:tersembunyi daripada mengganggu position:sticky, anda perlu dua pilihan:

• Gunakan Teknik Moden: Sejak awal menyiarkan soalan ini, CSS telah berkembang untuk memperkenalkan mengandungi: cat. Dengan menetapkan kandungan: cat pada bekas induk, anda boleh menghalang kandungan melimpah daripada terlepas dan memastikan unsur melekit kekal kelihatan dan diletakkan dengan betul.

.parent {
  contain: paint;
}

• Laraskan Harta Limpahan : Sebagai alternatif, anda boleh menetapkan sifat limpahan kepada auto atau tatal dan bukannya tersembunyi. Ini membolehkan kandungan melangkaui sempadan bekas dan memastikan unsur melekit kekal kelihatan.

.parent {
  overflow: auto;
  /* or */
  overflow: scroll;
}

Atas ialah kandungan terperinci Mengapa Adakah Tingkah Laku `limpahan: tersembunyi` Memecahkan `kedudukan: melekit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!