Mengapakah `bawah: 0` dalam Kedudukan Melekat Berlawanan dengan Jangkaan?-tutorial css-php.cn

Mengapakah `bawah: 0` dalam Kedudukan Melekat Berlawanan dengan Jangkaan?

Mary-Kate Olsen

Lepaskan： 2024-11-26 18:37:11

asal

193 orang telah melayarinya

Why Does `bottom: 0` in Sticky Positioning Act Opposite to Expectations?

Gelagat Tidak Dijangka dengan Kedudukan Melekit: bawah: 0

Dalam meneroka sifat kedudukan CSS, pembangun mungkin menghadapi tingkah laku yang tidak dijangka apabila menyatakan bahagian bawah: 0 untuk kedudukan melekit. Menurut dokumentasi MDN, elemen melekit pada mulanya dianggap sebagai elemen kedudukan relatif sehingga ambang tertentu dipenuhi, pada ketika itu ia beralih kepada kedudukan tetap. Walau bagaimanapun, apabila bawah: 0 ditentukan, tingkah laku yang bertentangan berlaku.

Gelagat Jangkaan lwn. Gelagat Sebenar

Dokumentasi MDN mencadangkan bahawa elemen dengan bawah: 0 hendaklah relatif apabila di bawah viewport dan tetap apabila di atasnya. Walau bagaimanapun, tingkah laku sebenar diterbalikkan: elemen ditetapkan apabila di bawah port pandang dan relatif apabila di atasnya.

Penjelasan

Percanggahan ini berpunca daripada perkataan dokumentasi MDN . Ia menyatakan bahawa unsur melekit dianggap sebagai relatif sehingga ambang melebihi, tidak semestinya bermula sebagai relatif. Dalam kes bawah: 0, ambang berkesan melebihi dari mula, kerana elemen bermula di bawah bahagian bawah port pandangan. Oleh itu, elemen bermula sebagai tetap dan menjadi relatif apabila ditatal melepasi titik permulaannya.

Contoh Ilustrasi

Pertimbangkan kod HTML dan CSS berikut:

<body>

Salin selepas log masuk

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

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

Salin selepas log masuk

Dalam contoh ini, elemen A bermula sebagai relatif dan menjadi tetap apabila ditatal ke bawah. Elemen B, sebaliknya, bermula sebagai tetap dan menjadi relatif apabila ditatal ke atas. Tingkah laku ini sejajar dengan tingkah laku sebenar yang diterangkan di atas, di mana bahagian bawah: 0 menghasilkan kedudukan tetap pada awalnya.

Atas ialah kandungan terperinci Mengapakah `bawah: 0` dalam Kedudukan Melekat Berlawanan dengan Jangkaan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!