Rumah > Artikel > hujung hadapan web > Mengapakah `bawah: 0` dalam Kedudukan Melekat Berlawanan dengan Jangkaan?
Mengapakah `bawah: 0` dalam Kedudukan Melekat Berlawanan dengan Jangkaan?
- Mary-Kate Olsenasal
- 2024-11-26 18:37:11136semak imbas
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>
.a {
margin-top: auto;
position: sticky;
bottom: 0;
}
.b {
position: sticky;
top: 0;
}
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!