Baricode LMS - Positioning CSS

Positioning CSS 📍

Property position menentukan bagaimana sebuah elemen diposisikan di halaman. Ini adalah salah satu topik yang paling penting sekaligus paling membingungkan bagi pemula CSS.

Property Posisi: top, right, bottom, left

Setelah menentukan jenis positioning, kamu bisa menggeser elemen menggunakan property:

.elemen {
  position: /* ... */;
  top: 10px;    /* jarak dari atas */
  right: 20px;  /* jarak dari kanan */
  bottom: 10px; /* jarak dari bawah */
  left: 20px;   /* jarak dari kiri */
}

1. position: static (Default)

Semua elemen HTML secara default menggunakan static — elemen mengikuti alur normal dokumen dan top/right/bottom/left tidak berpengaruh:

.normal {
  position: static; /* tidak perlu ditulis — ini default */
}

2. position: relative

Elemen tetap di posisi normalnya dalam alur dokumen, tapi bisa digeser relatif dari posisi normal-nya. Ruang yang ditinggalkan tetap ada:

.relatif {
  position: relative;
  top: 20px;   /* geser 20px ke bawah dari posisi normalnya */
  left: 30px;  /* geser 30px ke kanan */
}

Selain untuk menggeser elemen, position: relative juga digunakan sebagai anchor (jangkar) untuk elemen absolute di dalamnya.

3. position: absolute

Elemen keluar dari alur normal dokumen dan diposisikan relatif terhadap ancestor terdekat yang memiliki position bukan static. Jika tidak ada, relatif terhadap <html>:

/* Parent harus punya position: relative sebagai jangkar */
.parent {
  position: relative;
  width: 300px;
  height: 200px;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px; /* menempel di sudut kanan atas parent */
}

<div class="parent">
  <img src="produk.jpg">
  <span class="badge">Baru!</span>
</div>

4. position: fixed

Elemen diposisikan relatif terhadap viewport (jendela browser) dan tetap di tempatnya saat halaman di-scroll:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tombol-kembali-atas {
  position: fixed;
  bottom: 24px;
  right: 24px;
}

5. position: sticky

Kombinasi antara relative dan fixed — elemen mengikuti scroll sampai batas tertentu, lalu "menempel" di posisi yang ditentukan:

.header-tabel {
  position: sticky;
  top: 0; /* menempel di atas saat di-scroll sampai sana */
  background: white;
  z-index: 10;
}

.sidebar {
  position: sticky;
  top: 80px; /* menempel 80px dari atas viewport */
}

z-index — Urutan Tumpukan

Ketika elemen saling tumpang tindih, z-index menentukan mana yang tampil di atas. Nilai lebih besar = tampil di atas:

.bawah  { z-index: 1; }
.tengah { z-index: 2; }
.atas   { z-index: 3; } /* tampil paling atas */

z-index hanya bekerja pada elemen yang memiliki position selain static.

Contoh Nyata — Modal Dialog

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centering sempurna */
  background: white;
  padding: 32px;
  border-radius: 12px;
  z-index: 1000;
}

Ringkasan Perbandingan

Nilai	Alur Normal?	Relatif terhadap	Ikut scroll?
`static`	Ya	—	Ya
`relative`	Ya (ruang tetap ada)	Posisi normalnya sendiri	Ya
`absolute`	Tidak	Parent positioned terdekat	Ya
`fixed`	Tidak	Viewport	Tidak
`sticky`	Ya (awalnya)	Viewport (setelah batas)	Sebagian

💡 Tips: Selalu pastikan ada position: relative pada parent ketika menggunakan position: absolute pada child. Tanpanya, elemen akan melompat ke posisi tak terduga relatif terhadap <html>. 📌

Positioning CSS