Position (Static, Relative, Absolute dan Fixed) di CSS adalah konsep penting untuk mengatur tata letak elemen di halaman web agar tampilan lebih rapi dan profesional.
Halo teman teman, sering merasa bingung kenapa ada elemen yang seolah melayang, menempel di atas, atau tetap di tempat saat di scroll? Pada artikel ini kodelyly.com akan membahas Position (Static, Relative, Absolute dan Fixed) di CSS secara santai namun tetap lengkap, supaya kalian lebih paham kapan harus memakai setiap jenis position.
Position (Static, Relative, Absolute Dan Fixed) Di CSS
Apa Itu Properti Position Di CSS?
Properti position di CSS digunakan untuk menentukan bagaimana suatu elemen ditempatkan di dalam halaman. Dengan position kalian bisa mengatur apakah elemen mengikuti alur normal dokumen, bisa digeser dengan top, right, bottom, left, atau bahkan menempel di posisi tertentu saat halaman di scroll.
Nilai position yang paling sering dipakai adalah static, relative, absolute dan fixed. Masing masing punya perilaku berbeda dan sangat berpengaruh pada layout.
Position: Static
Position: static adalah nilai bawaan semua elemen. Artinya elemen akan mengikuti alur normal dokumen dan tidak bisa digeser menggunakan properti top, right, bottom, left.
Contoh kode:
div.box {
position: static;
}
Pada mode static, elemen akan muncul berurutan sesuai struktur HTML. Biasanya digunakan ketika kalian tidak butuh pengaturan posisi khusus.
Position: Relative
Position: relative membuat elemen tetap berada pada alur normal dokumen, namun sekarang bisa digeser menggunakan top, right, bottom, dan left relatif terhadap posisi awalnya.
Contoh kode:
div.box {
position: relative;
top: 10px;
left: 20px;
}
Pada contoh di atas, elemen bergeser sedikit dari posisi semula tetapi ruang aslinya tetap dipertahankan. Relative juga sering dipakai sebagai kontainer acuan untuk elemen lain yang memakai position absolute.
Position: Absolute
Position: absolute membuat elemen keluar dari alur normal dokumen. Elemen akan diposisikan relatif terhadap leluhur (parent) terdekat yang punya position selain static, misalnya relative, absolute atau fixed. Jika tidak ada, acuan posisinya adalah seluruh jendela dokumen.
Contoh kode:
.wrapper {
position: relative;
}
.badge {
position: absolute;
top: 0;
right: 0;
}
Teknik ini sering dipakai untuk membuat badge di pojok kartu, tooltip, atau elemen dekorasi yang menempel pada bagian tertentu dari parent.
Position: Fixed
Position: fixed membuat elemen menempel pada posisi tertentu di jendela browser. Saat halaman di scroll, elemen fixed tetap diam di tempat. Posisi ditentukan oleh top, right, bottom, dan left relatif terhadap viewport.
Contoh kode:
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
Contoh umum penggunaan fixed adalah navbar yang selalu terlihat di bagian atas, tombol kembali ke atas, atau floating widget di pojok layar.
Tabel Perbandingan Jenis Position Di CSS
| Jenis position | Ikut alur dokumen | Bisa digeser dengan top dll | Contoh penggunaan |
|---|---|---|---|
| static | Ya | Tidak | Konten biasa |
| relative | Ya | Ya | Kontainer untuk elemen absolute, sedikit menggeser elemen |
| absolute | Tidak | Ya | Badge, tooltip, label di pojok kartu |
| fixed | Tidak | Ya | Navbar selalu di atas, tombol kembali ke atas |
Tips Memilih Jenis Position Yang Tepat
Kalian bisa memakai static untuk elemen umum yang tidak butuh posisi khusus. Jika ingin sedikit menggeser elemen atau menjadikannya acuan bagi elemen lain, gunakan relative. Untuk elemen yang harus menempel pada area tertentu dari kontainer, gunakan absolute. Sementara itu, jika elemen harus selalu terlihat meski halaman di scroll, pilih fixed.
Selalu perhatikan juga pengalaman pengguna. Terlalu banyak elemen fixed dapat mengganggu tampilan di layar kecil.
Baca Juga:
Transition & Animation Dasar CSS
Kesimpulan
Position (Static, Relative, Absolute dan Fixed) di CSS membantu kalian mengontrol tata letak elemen dengan lebih fleksibel. Static mengikuti alur normal, relative dapat digeser dari posisi awal dan menjadi acuan, absolute keluar dari alur dan menempel pada kontainer tertentu, sedangkan fixed selalu menempel pada viewport. Dengan memahami perbedaan ini, kalian bisa membuat layout yang lebih rapi, modern dan nyaman dilihat.
Sekian artikel dari kodelyly.com, semoga penjelasan tentang position di CSS ini membantu kalian saat mengatur layout halaman web. Sampai jumpa di pembahasan CSS berikutnya.