Css Positioning

Secara default, elemen HTML akan mengalir dari atas ke bawah (block) atau kiri ke kanan (inline). Positioning adalah fitur CSS yang memungkinkan kamu untuk "keluar" dari aliran normal tersebut dan meletakkan elemen di posisi yang sangat spesifik, bahkan menumpuk di atas elemen lain.
Author : Celvine
Last Update : 10 March 2026

1. Penjelasan

Ada empat jenis positioning utama yang sering kamu gunakan:

  • Relative: Elemen tetap berada di aliran dokumen, tapi kamu bisa menggesernya sedikit (top, right, bottom, left) tanpa memengaruhi posisi elemen di sekitarnya.
  • Absolute: Elemen "terbang" keluar dari aliran dokumen. Posisinya ditentukan berdasarkan parent (orang tua) terdekat yang memiliki posisi (selain static). Jika tidak ada, ia akan merujuk ke <body>.
  • Fixed: Elemen menempel pada layar (viewport). Ia tidak akan bergerak meskipun halaman di-scroll.
  • Sticky: Campuran antara relative dan fixed. Elemen akan terlihat normal sampai layar mencapai titik tertentu (misal: bagian atas layar), lalu ia akan "menempel" di sana.

Penting: Saat menggunakan position: absolute, pastikan elemen pembungkusnya (parent) memiliki position: relative. Jika tidak, elemen absolute kamu akan "tersesat" mencari patokan hingga ke ujung halaman web.

2. Sintaksis & Properti

Berikut adalah cara dasar menggunakan properti positioning:

/* Elemen hanya geser dari posisi aslinya */
.box-relative {
  position: relative;
  top: 20px;
  left: 10px;
}

/* Elemen menempel di pojok kanan atas parent-nya */
.box-absolute {
  position: absolute;
  top: 0;
  right: 0;
}

/* Elemen selalu ada di bawah layar (misal: tombol chat) */
.box-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* Navbar yang tetap ada di atas saat di-scroll */
.navbar-sticky {
  position: sticky;
  top: 0;
}

3. Studi Kasus: Membuat Badge "Promo" pada Kartu Produk

Bayangkan kamu membuat kartu produk e-commerce dan ingin menaruh label "Diskon 50%" di pojok kanan atas gambar.

<div class="product-card">
  <span class="badge">Sale 50%</span>
  <img src="sepatu.jpg" alt="Sepatu Keren">
  <div class="info">
    <h3>Sepatu Lari Pro</h3>
    <p>Rp 500.000</p>
  </div>
</div>
/* Parent harus relative sebagai patokan */
.product-card {
  position: relative; 
  width: 300px;
  border: 1px solid #ddd;
  padding: 10px;
}

/* Badge 'melayang' di atas gambar */
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #e74c3c;
  color: white;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
}

.product-card img {
  width: 100%;
  display: block;
}

4. Best Practice

  • Gunakan Fixed Secukupnya: Elemen fixed (seperti iklan atau pop-up) yang terlalu banyak bisa mengganggu pengalaman pengguna di layar HP yang kecil.
  • Z-index: Jika ada elemen positioning yang bertumpuk, gunakan z-index (yang akan kita bahas nanti) untuk mengatur siapa yang di depan dan siapa yang di belakang.
  • Cek Sticky Support: position: sticky membutuhkan minimal satu properti arah (seperti top: 0) agar bisa bekerja.

Css Selector

Memilih elemen tidak hanya sebatas menggunakan `class` atau `id`

Css Indexing

z-index adalah properti yang menentukan urutan tumpukan elemen tersebut di sumbu Z (kedalaman layar).

On this page

1. Penjelasan
2. Sintaksis & Properti
3. Studi Kasus: Membuat Badge "Promo" pada Kartu Produk
4. Best Practice