Mengapa Kedudukan Melekit dengan `bawah: 0` Mempamerkan Gelagat Terbalik Berbanding dengan Dokumentasi MDN?

Memahami Gelagat Bertentangan Kedudukan Melekit

Dalam dokumentasi MDN, kedudukan melekit digambarkan sebagai hibrid kedudukan relatif dan tetap, di mana elemen bertindak seperti elemen kedudukan yang agak sehingga ambang melebihi, selepas itu ia bertindak sebagai elemen kedudukan tetap. Walau bagaimanapun, apabila menyatakan bahagian bawah: 0 untuk kedudukan melekit, tingkah laku nampaknya terbalik.

Mekanisme Kedudukan Melekit

Menurut MDN, elemen kedudukan melekit beroperasi dengan dua keadaan:

1. Relatif Mod: Elemen diposisikan secara relatif kepada aliran bekas atau induk statiknya.
2. Mod Tetap: Elemen diposisikan relatif kepada port pandangan, kekal di lokasi tetap.

Peralihan antara keadaan ini berlaku apabila ambang yang ditentukan ialah melebihi.

Penjelasan Senario

Pertimbangkan contoh berikut:

<div class="container">
  <header></header>
  <main></main>
  <footer>
    <div class="footer"></div>
  </footer>
</div>

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100vh;
}

.container>* {
  width: 100%;
}

footer {
  background: #faa;
  position: sticky;
  bottom: 0;
}

.footer {
  background: #aff;
  height: 100vh;
}

Apabila bahagian bawah: 0 ditentukan untuk elemen pengaki, ia pada mulanya bermula dalam keadaan tetap kerana ambang (bahagian bawah port pandangan) melebihi dari mula. Semasa anda menatal ke bawah, ambang masih melebihi, jadi pengaki kekal dalam kedudukan tetap.

Walau bagaimanapun, apabila elemen pengaki mencapai ambang (bahagian bawah port pandangan), ia beralih ke mod relatif kerana ambang tidak lagi melebihi. Ini adalah bertentangan dengan apa yang dicadangkan oleh dokumentasi MDN, yang menyatakan bahawa peralihan harus berlaku apabila elemen kurang daripada 0px dari bahagian bawah port pandangan.

Salah Tafsiran Bahasa

Kekaburan itu timbul daripada bahasa yang digunakan dalam dokumentasi MDN. Pernyataan "sehingga ambang melebihi" membayangkan bahawa keadaan relatif ialah keadaan permulaan untuk kedudukan melekit. Walau bagaimanapun, ini tidak selalu berlaku. Jika ambang sudah melebihi apabila elemen diisytiharkan melekit, ia akan bermula dalam keadaan tetap.

Kesimpulan

Memahami dua keadaan kedudukan melekit dan apabila peralihan berlaku di antara mereka adalah penting untuk menggunakannya dengan berkesan. Tingkah laku yang diterangkan dalam dokumentasi MDN boleh diterbalikkan apabila ambang pada mulanya melebihi, menghasilkan tingkah laku yang berbeza daripada yang dijangkakan.

Atas ialah kandungan terperinci Mengapa Kedudukan Melekit dengan `bawah: 0` Mempamerkan Gelagat Terbalik Berbanding dengan Dokumentasi MDN?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!