Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

CSS Positioning Lanjutan: Menguasai Fixed, Sticky, dan Z-Index

Jika relative dan absolute digunakan untuk menata elemen di dalam layout, maka fixed dan sticky digunakan untuk mengatur bagaimana elemen berinteraksi dengan viewport (layar pengguna) saat halaman di-scroll.

1. Position: Fixed

Elemen dengan posisi fixed akan keluar dari aliran dokumen dan terkunci pada posisi tertentu relatif terhadap layar browser (viewport).

• Perilaku: Ia tidak akan berpindah meskipun halaman di-scroll.

• Koordinat: Menggunakan top, bottom, right, atau left terhadap layar.

• Kegunaan: Tombol "Back to Top", Navbar utama, atau chat widget di pojok bawah.

2. Position: Sticky

Ini adalah perpaduan antara relative dan fixed.

• Perilaku: Elemen akan bertindak seperti relative sampai ia mencapai titik koordinat yang ditentukan (saat di-scroll), kemudian ia akan berubah menjadi "fixed" atau menempel di layar.

• Syarat: Anda wajib menentukan setidaknya satu koordinat (misal: top: 0) dan induknya tidak boleh memiliki properti overflow: hidden.

• Kegunaan: Header tabel yang tetap terlihat saat datanya di-scroll, atau sidebar yang mengikuti konten utama.

3. Memahami Z-Index (Hierarki Tumpukan)

Saat elemen-elemen mulai diposisikan (selain static), mereka mungkin akan saling bertumpuk. z-index menentukan elemen mana yang berada di paling depan.

• Logika: Nilai z-index yang lebih tinggi akan menutupi elemen dengan nilai lebih rendah.

• Syarat: z-index hanya bekerja pada elemen yang memiliki properti position selain static.

Tutorial: Membuat Sticky Navbar & Floating Button

Mari kita buat sebuah halaman dengan navigasi yang menempel saat di-scroll dan sebuah tombol bantuan di pojok layar.

Struktur HTML

<nav class="navbar">SatuMedia Navnav> <div class="content"> <p>Scroll ke bawah untuk melihat efeknya...p> div> <button class="floating-btn">?button>

Kode CSS

/* Sticky Navbar: Menempel di atas saat mencapai batas layar */
.navbar { position: sticky; top: 0; background: #3498db; color: white; padding: 15px; z-index: 100; /* Pastikan berada di atas konten lain */
} .content { height: 2000px; /* Membuat halaman panjang untuk di-scroll */ padding: 20px;
} /* Fixed Button: Selalu di pojok kanan bawah layar */
.floating-btn { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background: #e74c3c; color: white; border-radius: 50%; border: none; z-index: 999; /* Sangat tinggi agar tidak tertutup apapun */ cursor: pointer;
}

Perbedaan Cepat: Fixed vs Sticky

Tips Pro untuk Developer

1. Z-Index Terorganisir: Hindari memberi nilai z-index: 999999 secara acak. Gunakan skala kelipatan 10 (10, 20, 30) agar lebih mudah dikelola.

2. Parent Constraint: Ingat bahwa elemen sticky hanya akan menempel selama ia masih berada di dalam area elemen induknya. Jika elemen induknya berakhir, elemen sticky tersebut akan ikut ter-scroll ke atas.

3. Mobile Performance: Penggunaan fixed yang terlalu banyak di mobile terkadang bisa menyebabkan masalah performa pada browser lama.

Teknik sticky sangat cocok jika Anda ingin membuat navigasi kategori di portal riwara.id agar tetap terlihat saat pemb aca membaca berita yang panjang!