Relative Positioning

position: relative adalah nilai positioning yang paling ramah: elemen tetap tinggal di alur dokumen, tetapi boleh digeser beberapa piksel dari posisinya tanpa mengganggu siapa pun. Perilaku ini cocok untuk koreksi visual kecil — badge pada judul, penanda pada chip, stempel pada kartu. Namun peran terbesarnya justru yang tidak terlihat mata: menjadi jangkar bagi anak absolute dan membuka izin z-index. Pada chapter ini kita membedah cara kerja offset, nilai negatif, dan dua peran relative yang saling melengkapi.

Cara Kerja: Geser Visual, Ruang Tetap #

Elemen relative tetap dihitung bagian dari normal flow. Slot aslinya di alur tetap dipertahankan sebesar ukurannya, sehingga elemen-elemen lain tidak bergeser sedikit pun. Yang berpindah hanya posisi render akhirnya, ditentukan oleh offset yang kita tulis:

.keterangan-produk {
  position: relative;
  top: 8px;   /* digeser turun 8px */
  left: 4px;  /* digeser ke kanan 4px */
}

Perhatikan pada demo: elemen bergeser, tetapi slot alurnya tetap terisi:

Mari kita telaah pola di atas:

1. position: relative: menandai elemen sebagai positioned, sehingga offset mulai dihitung.
2. top: 8px: tepi atas elemen ditegakkan 8 piksel di bawah posisi alurnya — elemen tampak turun.
3. left: 4px: tepi kiri digeser 4 piksel ke kanan dari posisi alurnya.
4. Ruang tetap ada: karena slot alur dipertahankan, tidak ada elemen lain yang merespons pergeseran ini.

Cara cepat membuktikannya sendiri: buka DevTools, pilih elemen ber-offset, dan lihat panel Computed. Nilai position-nya relative, sedangkan elemen-elemen sekitarnya tetap menempati posisi layout semula — pergeseran hanya terjadi pada langkah render akhir, bukan pada perhitungan layout.

Nilai Negatif dan Offset yang Bertentangan #

Offset menerima nilai negatif, dan justru di situlah kegunaannya paling terasa: top: -8px mengangkat elemen ke atas sehingga menimpa area di atasnya. Pola badge yang menonjol keluar dari tepi kartu hampir selalu memakai nilai negatif seperti ini.

.stempel-baru {
  position: relative;
  top: -8px;   /* naik 8px, menimpa tepi atas */
  left: -8px;  /* geser kiri 8px */
}

Satu aturan lagi perlu diketahui: bila offset yang berlawanan ditulis sekaligus — misalnya top dan bottom — browser hanya memakai top dan mengabaikan bottom; pada dokumen arah kiri-ke-kanan, left menang atas right. Offset relative tidak pernah “menyeimbangkan” kedua sisi sekaligus.

Dua kartu identik; pada kartu kedua, chip “Baru” diberi offset relative negatif:

Peran Utama di Dunia Nyata: Jangkar #

Pola penggunaan relative yang paling sering muncul di kode sungguhan justru tanpa satu pun offset:

.kartu-produk {
  position: relative; /* tanpa offset — cukup sebagai jangkar */
}

Deklarasi ini membawa dua akibat penting yang dibahas pada chapter-chapter mendatang:

• Elemen positioned menjadi containing block bagi keturunan absolute, sehingga badge dan tooltip di dalamnya mengacu ke kartu, bukan ke halaman (chapter Absolute Positioning dan Containing Block).
• Elemen positioned menjadi sasaran yang sah bagi z-index, sehingga kartu ini bisa disusun urutan tumpukannya (chapter Z-Index).

Karena itu, biasakan membaca position: relative tanpa offset sebagai pesan: “induk ini sengaja disiapkan sebagai jangkar”. Satu baris yang diam-diam mencegah banyak bug positioning.

Kesalahan Umum #

Ringkasan #

Relative menggeser elemen secara visual dari posisi static-nya lewat offset top/right/bottom/left, sementara ruang alurnya tetap dipertahankan sehingga elemen lain tidak terpengaruh; nilai negatif membuka pola penimpaan tepi, dan offset yang bertentangan diselesaikan dengan memprioritaskan top dan left. Peran terbesarnya adalah persiapan: menjadikan elemen jangkar bagi anak absolute dan sasaran z-index. Chapter berikutnya melanjutkan ke sisi lain dari kemitraan itu — absolute, yang benar-benar melepas elemen dari alur dan menempatkannya terhadap jangkar yang kita siapkan dengan relative.