Bagaimana caranya - Gambar Lengket
Pelajari cara membuat gambar tempel dengan CSS.
Gambar Lengket
Catatan: Contoh ini tidak berfungsi di Internet Explorer atau Edge 15 dan versi yang lebih lama.
Gambar Lengket
Contoh
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Elemen dengan position: sticky;
diposisikan berdasarkan posisi gulir pengguna.
Elemen lengket beralih antara relative
dan fixed
, tergantung pada posisi gulir. Itu diposisikan relatif sampai posisi offset yang diberikan terpenuhi di viewport - lalu "menempel" di tempatnya (seperti position:fixed).
Catatan: Internet Explorer, Edge 15 dan versi sebelumnya tidak mendukung pemosisian tetap. Safari memerlukan awalan -webkit- (lihat contoh di bawah). Anda juga harus menentukan setidaknya satu dari top
, right
, bottom
atau left
agar penempatan tetap berfungsi.
Untuk mempelajari lebih lanjut tentang penentuan posisi CSS, baca tutorial Posisi CSS kami.
Untuk mempelajari lebih lanjut tentang cara menata gambar, baca tutorial Gambar CSS kami.