Mengapa Kedudukan Melekit Berkelakuan Berbeza Daripada Dokumentasi MDN Huraikan?

Memeriksa Percanggahan dalam Gelagat Kedudukan Melekit

Dokumentasi MDN menggambarkan kedudukan melekit sebagai atribut yang mengalihkan elemen daripada peletakan relatif kepada peletakan tetap sekali ambang yang ditetapkan telah melepasi. Walau bagaimanapun, dalam amalan, ia berkelakuan berbeza. Percanggahan ini berpunca daripada salah faham susunan keadaan ini dilaksanakan.

Menurut MDN, elemen kedudukan melekit pada mulanya berkelakuan seperti elemen kedudukan relatif sehingga ambang melebihi. Walau bagaimanapun, dalam konteks di mana bottom:0 ditentukan, ambang sudah melepasi dalam keadaan awal. Akibatnya, elemen terus memasuki peletakan tetapnya dan kekal sedemikian sehingga kedudukan elemen melebihi 0px dari bahagian bawah port pandangan.

Memahami Keadaan Kedudukan Melekit

Kedudukan:melekit mempunyai dua keadaan berbeza:

1. Relatif Keadaan: Elemen berkelakuan seperti objek yang agak berkedudukan.
2. Keadaan Tetap: Elemen melekat pada kedudukan tetap terhadap viewport.

The keadaan awal ditentukan oleh peletakan elemen dan ambang yang ditentukan. Dalam kes bawah:0, ambang segera melepasi, membawa kepada keadaan tetap awal. Apabila port pandangan menatal, elemen akan kekal tetap sehingga jarak dari tepi bawah menjadi lebih besar daripada 0px. Pada ketika ini, ia kembali kepada keadaan relatifnya.

Menggambarkan Gelagat

Pertimbangkan coretan kod berikut:

body {
  height:150vh;
  margin:0;
  display:flex;
  flex-direction:column;
  border:2px solid;
  margin:50px;
}

.b {
  margin-top:auto;
  position:sticky;
  bottom:0;
}

.a {
  position:sticky;
  top:0;
}

<div class="a"> 
  I will start relative then I will be fixed
</div>
<div class="b"> 
  I will start fixed then I will be relative
</div>

Elemen A, dengan top:0, pada mulanya akan bertindak sebagai relatif dan beralih kepada tetap apabila ia mencapai bahagian atas tempat pandang. Elemen B, dengan bottom:0, akan bermula serta-merta dalam kedudukan tetap dan beralih kepada relatif apabila jarak dari bahagian bawah port pandangan melebihi 0px.

Atas ialah kandungan terperinci Mengapa Kedudukan Melekit Berkelakuan Berbeza Daripada Dokumentasi MDN Huraikan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!