Tutorial CSS Position Lengkap: Static, Relative, Absolute, Fixed, dan Sticky
Properti CSS Position adalah salah satu konsep fundamental dalam pengembangan web. Dengan mempelajari dan memahami berbagai jenis position seperti static, relative, absolute, fixed, dan sticky, kamu dapat membuat layout yang fleksibel, dinamis, serta mudah dikontrol pada berbagai perangkat.
Artikel ini akan membahas secara mendalam konsep, fungsi, contoh penggunaan, dan tips terbaik untuk setiap jenis position di CSS agar kamu bisa menerapkannya secara profesional dalam proyek webmu.
Daftar isi
Baca juga: Cara Mengatur Ukuran Elemen di CSS (Width, Height, dan Max-Width)
Apa Itu CSS Position?
Properti position di CSS menentukan bagaimana elemen ditempatkan di halaman web dan bagaimana elemen tersebut berinteraksi dengan elemen lainnya.
Dengan position, kamu bisa mengatur koordinat elemen menggunakan properti top, right, bottom, dan left.
Terdapat lima nilai utama untuk position:
staticrelativeabsolutefixedsticky
Masing-masing nilai memiliki karakteristik berbeda dan dapat digunakan sesuai kebutuhan layout.
Static CSS
position: static; adalah nilai default untuk semua elemen HTML. Elemen dengan posisi static mengikuti alur dokumen normal dan tidak dapat dipengaruhi oleh properti top, left, right, atau bottom.
div {
position: static;
background-color: lightgray;
padding: 10px;
}Code language: CSS (css)Elemen static digunakan untuk bagian yang tidak perlu diatur posisinya secara manual.
Relative CSS
position: relative; adalah nilai yang mengatur elemen berdasarkan posisi aslinya. Elemen dengan posisi relative dapat dipindahkan relatif terhadap posisi aslinya menggunakan properti top, right, bottom, dan left.
div {
position: relative;
top: 10px;
left: 10px;
background-color: lightgray;
padding: 10px;
}Code language: CSS (css)Elemen relative digunakan untuk bagian yang perlu diatur posisinya secara manual.
Fixed CSS
position: fixed; adalah nilai yang mengatur elemen berdasarkan posisi relatif terhadap viewport (area tampilan browser). Elemen dengan posisi fixed tidak mengikuti alur dokumen normal dan tetap terlihat di posisi yang sama meskipun halaman di-scroll.
div {
position: fixed;
top: 10px;
left: 10px;
background-color: lightgray;
padding: 10px;
}Code language: CSS (css)Elemen fixed digunakan untuk bagian yang perlu diatur posisinya secara manual.
Sticky CSS
position: sticky; adalah nilai yang mengatur elemen berdasarkan posisi relatif terhadap viewport (area tampilan browser). Elemen dengan posisi sticky tidak mengikuti alur dokumen normal dan tetap terlihat di posisi yang sama meskipun halaman di-scroll.
div {
position: sticky;
top: 10px;
left: 10px;
background-color: lightgray;
padding: 10px;
}Code language: CSS (css)Ini sering digunakan untuk menu navigasi yang tetap terlihat saat scroll, atau judul bagian pada tabel panjang.
Properti Top, Right, Bottom, dan Left
Keempat properti ini digunakan untuk menentukan jarak elemen dari tepi kontainer atau viewport.
| Properti | Fungsi |
|---|---|
top | Menentukan jarak dari sisi atas |
right | Menentukan jarak dari sisi kanan |
bottom | Menentukan jarak dari sisi bawah |
left | Menentukan jarak dari sisi kiri |
Contoh penggunaan:
.element {
position: absolute;
top: 50px;
left: 100px;
}Code language: CSS (css)Z-Index dan Lapisan Elemen (Layer)
z-index menentukan urutan tampilan elemen ketika tumpang tindih. Elemen dengan nilai z-index lebih tinggi akan muncul di atas elemen lain.
.box1 {
position: absolute;
z-index: 1;
}
.box2 {
position: absolute;
z-index: 10;
}Code language: CSS (css)Pastikan elemen tidak menggunakan position: static; agar z-index berfungsi.
Contoh Layout Lengkap dengan Position CSS
Berikut contoh layout sederhana yang menggabungkan berbagai jenis position:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial CSS Position</title>
<style>
body { margin: 0; font-family: Arial, sans-serif; }
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #007bff;
color: white;
padding: 15px;
text-align: center;
}
.content {
margin-top: 80px;
padding: 20px;
}
.relative-box {
position: relative;
background: #e3f2fd;
height: 200px;
}
.absolute-box {
position: absolute;
top: 50px;
left: 50px;
background: #ffc107;
padding: 10px;
}
.sticky-footer {
position: sticky;
bottom: 0;
background: #343a40;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>Header Tetap di Atas</header>
<div class="content">
<div class="relative-box">
Kotak Relative
<div class="absolute-box">Kotak Absolute</div>
</div>
<div class="sticky-footer">Footer Sticky</div>
</div>
</body>
</html>Code language: HTML, XML (xml)Hasilnya:
- Header tetap di atas.
- Kotak kuning (
absolute) berada di dalam kotak biru (relative). - Footer akan menempel di bawah ketika digulir ke bagian akhir halaman.
Position vs Float vs Transform
| Konsep | Fungsi | Perbedaan Utama |
|---|---|---|
position | Mengatur posisi elemen di halaman | Paling fleksibel dan presisi |
float | Menyusun elemen sejajar kiri/kanan | Tidak cocok untuk layout kompleks |
transform: translate() | Menggeser elemen secara visual tanpa mengubah flow | Tidak mengubah posisi logis elemen |
Tips Menggunakan Position CSS
- Gunakan
relativeuntuk kontainer induk dari elemenabsolute. - Hindari penggunaan
absoluteuntuk seluruh layout agar tetap responsif. - Gunakan
fixedhanya untuk elemen penting (navbar, tombol aksi). - Gunakan
stickyuntuk navigasi atau elemen penanda bagian halaman. - Kombinasikan
z-indexdan position untuk efek lapisan (layer).
Kesimpulan
Properti position di CSS sangat penting dalam membangun struktur layout web yang efisien dan interaktif.
Dengan memahami perbedaan antara static, relative, absolute, fixed, dan sticky, kamu bisa mengatur tampilan elemen secara akurat di berbagai perangkat.
