Bagaimanakah Kotak Tatal Mempengaruhi Kedudukan Melekit dalam CSS?

Memahami Kotak Tatal dalam Modul Reka Letak Kedudukan CSS

Modul Reka Letak Kedudukan CSS mentakrifkan kedudukan melekit sebagai kaedah di mana offset kotak dikira relatif kepada nenek moyang terdekat dengan "kotak menatal" atau port pandangan. Walau bagaimanapun, sifat sebenar kotak tatal telah mencetuskan sedikit kekeliruan.

Kotak Tatal Ditakrifkan

Kotak tatal pada asasnya ialah kotak di mana sifat limpahan ditetapkan kepada nilai selain daripada yang boleh dilihat. Menetapkan limpahan kepada tersembunyi, sebagai contoh, mencipta kotak dengan kandungan boleh ditatal.

Kesan pada Kedudukan Melekit

Dalam konteks kedudukan melekit, kotak menatal terdekat kepada elemen melekit memainkan peranan penting . Jika nenek moyang elemen melekit mempunyai limpahan ditetapkan kepada nilai menatal, offset elemen melekit akan dikira secara relatif kepada kotak menatal itu.

Menghidupkan atau Matikan Kotak Tatal

Untuk mengawal sama ada kotak menjadi kotak menatal, seseorang perlu menetapkan sifat limpahan dengan sewajarnya. Menetapkan limpahan kepada kelihatan menghalang penciptaan kotak tatal, manakala menetapkannya kepada auto, tatal atau tersembunyi mencipta kotak tatal.

Contoh

Pertimbangkan contoh berikut:

.wrapper {
  height: 200vh;
  border: 2px solid;
}
.wrapper > div {
  position: sticky;
  top: 0;
  height: 20px;
  background: red;
}

<div class="wrapper">
  <div></div>
</div>

Kod ini mencipta bekas tinggi (pembungkus) dan unsur melekit (div) di dalamnya. Pembalut mempunyai limpahan: tersembunyi, menjadikannya kotak tatal. Apabila pengguna menatal halaman, elemen melekit akan melekat pada bahagian atas port pandangan sehingga ia mencapai bahagian atas pembalut. Pada ketika ini, elemen melekit akan berhenti menatal kerana ia telah mencapai bahagian atas kotak tatal terdekatnya, pembungkus.

Atas ialah kandungan terperinci Bagaimanakah Kotak Tatal Mempengaruhi Kedudukan Melekit dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!