ImagesLesson 89Preview gratis
Sticky Image
Lesson ini bagian dari How To · Semua level
Ringkasan
Sticky image membuat gambar tetap terlihat di layar saat teks di sebelahnya digulir. position: sticky bekerja di dalam batas induknya, sehingga gambar berhenti menempel ketika bagian tersebut selesai. Pola ini cocok untuk halaman produk atau artikel dengan gambar pendukung.
Poin kunci
- position: sticky membuat elemen menempel setelah mencapai offset tertentu.
- top menentukan jarak elemen dari tepi atas viewport saat menempel.
- Induk harus cukup tinggi agar efek sticky memiliki ruang bergerak.
- align-self: flex-start mencegah item flex meregang setinggi induk.
- Pada layar kecil, sticky sering dimatikan agar tidak mengganggu ruang baca.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.