KAL
Menu

Pemosisian

Pemosisian relative, absolute, fixed, dan sticky beserta kasus pemakaiannya.

Daftar isi

Topik ini menjelaskan properti position, properti yang mengatur skema pemosisian sebuah elemen di sekitar maupun di luar alur normal. Pembahasan mencakup nilai static, relative, absolute, fixed, dan sticky, kumpulan properti inset untuk menyatakan jarak penempatan, serta kasus pemakaiannya seperti lencana pada kartu, tombol kembali ke atas, dan header yang menempel saat halaman digulir. Demo di bagian tengah memperlihatkan tiga skema utama secara berdampingan.

Nilai position dan elemen terposition#

Properti position menentukan bagaimana sebuah elemen diposisikan. Nilai static adalah nilai bawanya: elemen mengikuti alur normal, dan properti penempatan seperti top serta left tidak berefek padanya. Setiap nilai lain, yaitu relative, absolute, fixed, dan sticky, menjadikan elemen itu terposition (positioned), yaitu siap menerima offset penempatan dan berlaku sebagai acuan bagi keturunannya. Kata terposition digunakan di sepanjang topik ini untuk menyebut elemen dengan nilai position selain static.

Offset penempatan dinyatakan dengan empat properti, yaitu top, right, bottom, dan left, yang secara kolektif disebut properti inset (inset properties). Shorthand inset menyatakan keempatnya sekaligus dengan urutan atas, kanan, bawah, lalu kiri. Bentuk inset: 0 misalnya, merupakan cara ringkas untuk menempelkan elemen ke keempat sisi acuannya sekaligus. Nilainya dapat berupa satuan panjang, persen, atau kata kunci auto, dan nilai persen mengikuti ukuran blok acuannya. Cara keempat nilai itu ditafsirkan bergantung pada nilai position yang menyertainya, sehingga bagian-bagian berikut menelusuri nilai position tersebut satu per satu.

Pemosisian relative#

Nilai relative memosisikan elemen relatif terhadap posisi aslinya pada alur normal. Offset yang diberikan menggeser kotak yang terlihat, sedangkan ruang aslinya tetap dicadangkan, sehingga tetangga di sekitarnya tidak bergeser sedikit pun. Elemen yang digeser dapat menumpuk di atas konten lain, dan ruang aslinya yang kosong tampak sebagai celah apabila offsetnya besar.

css Contoh: kotak catatan yang dinaikkan sedikit 
.catatan {
  position: relative;
  top: -6px;
}

Deklarasi di atas menggeser elemen catatan enam piksel ke atas tanpa memengaruhi posisi elemen di bawahnya. Perhatikan bahwa top: -6px merupakan offset negatif: nilai top yang positif menggeser elemen ke bawah, sedangkan nilai negatif menggesernya ke atas. Peran penting lain dari relative bersifat tidak kasat mata: elemen relative menjadi acuan pemosisian bagi keturunannya yang berperan absolute. Pola ini hampir selalu digunakan bersama absolute dan ditunjukkan pada demo di bagian selanjutnya. Karena ruang aslinya tetap dicadangkan, relative bukan alat untuk memindahkan elemen jauh, melainkan alat untuk penyesuaian halus dan penandaan acuan. Penggeseran kecil semacam ini lazim digunakan untuk menaikkan ikon atau penanda yang terasa terlalu rendah terhadap teks di sekitarnya.

Pemosisian absolute#

Nilai absolute mengeluarkan elemen dari alur normal. Elemen tidak lagi menempati ruangnya, sehingga elemen-elemen lain menutup celah tersebut seolah elemen itu tidak ada. Titik acuannya adalah leluhur terdekat yang terposition, bukan induknya apa adanya, dan offset top, right, bottom, atau left diukur dari tepi bagian dalam acuan tersebut. Blok acuan ini disebut blok penampung (containing block). Apabila tidak ada leluhur yang terposition, acuannya menjadi blok penampung awal yang ukurannya mengikuti viewport.

Kasus yang paling sering dijumpai adalah lencana pada kartu. Kartu diberi position: relative agar menjadi acuan, sedangkan lencananya diberi position: absolute dan ditempel ke sudut kanan atas:

css Contoh: lencana pada sudut kartu 
.kartu {
  position: relative;
}

.lencana {
  position: absolute;
  top: 12px;
  right: 12px;
}

Lencana ditempatkan dua belas piksel dari tepi atas dan tepi kanan kartu, terlepas dari posisi aslinya di dalam markup. Apabila deklarasi relative pada kartu dihapus, lencana melompat menempel ke tepi halaman karena acuannya berpindah. Aturan praktisnya: setiap kali elemen absolute tidak menempel di tempat yang diharapkan, periksa dahulu apakah induk yang dijadikan acuan sudah terposition.

Pemosisian fixed dan sticky#

Nilai fixed memosisikan elemen terhadap viewport, sehingga elemen tetap diam di layar meskipun halaman digulir. Elemen fixed juga keluar dari alur normal, sama seperti absolute. Kasus yang lazim adalah tombol kembali ke atas yang menempel di sudut kanan bawah layar dan selalu dapat ditekan tanpa menggulir balik.

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

Nilai sticky bersifat hibrida. Elemen mengikuti alur normal seperti relative, tetapi begitu posisi gulir melintasi ambang yang dinyatakan, misalnya top: 0, elemen menempel seolah fixed. Penempelannya berlaku di dalam kontainer gulir (scroll container) miliknya dan berhenti ketika batas induknya terlewati. Kombinasi ini menjadikan sticky pilihan utama untuk kepala tabel dan bar navigasi yang perlu tetap terlihat tanpa mengambil elemen dari alur dokumen. Selama berada di bawah ambang, elemen sticky tetap mengalir dan tetangganya tidak terganggu, sehingga tata letak tidak berubah saat halaman baru saja dimuat.

Demo panel pemosisian#

Demo berikut merangkum tiga skema yang baru diuraikan. Panel relative memperlihatkan kotak yang bergeser dengan garis putus-putus sebagai penanda posisi aslinya, dan tetangga di bawahnya tidak berpindah. Panel absolute memperlihatkan lencana yang menempel pada sudut kanan atas kontainernya yang berperan relative. Panel sticky memperlihatkan header yang menempel pada batas atas kontainer berketinggian tetap ketika daftar di dalamnya digulir. Jalankan demo, gulir bagian sticky, lalu amati posisi setiap kotak terhadap kontainernya:

Kode sumber demo
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo pemosisian relative, absolute, dan sticky</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <main>
    <h1>Demo pemosisian</h1>

    <h2>Relative</h2>
    <div class="papan">
      <div class="kotak">Kotak biasa</div>
      <div class="bayang"></div>
      <div class="kotak relatif">Kotak relative</div>
      <div class="kotak">Kotak biasa</div>
    </div>

    <h2>Absolute</h2>
    <div class="papan acuan">
      <span class="lencana">Lencana</span>
      <p>Induk dengan position: relative menjadi acuan lencana, sehingga lencana menempel pada sudut kanan atas induk, bukan pada sudut halaman.</p>
    </div>

    <h2>Sticky</h2>
    <div class="gulir">
      <div class="kepala">Header sticky</div>
      <div class="baris">Baris 1</div>
      <div class="baris">Baris 2</div>
      <div class="baris">Baris 3</div>
      <div class="baris">Baris 4</div>
      <div class="baris">Baris 5</div>
      <div class="baris">Baris 6</div>
    </div>
  </main>

<style>
/* Gaya demo pemosisian: relative, absolute, dan sticky */
body {
  font-family: sans-serif;
  background-color: #eef2f7;
  color: #1f2937;
  margin: 0;
  padding: 16px;
}

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 14px 0 8px; }

.papan {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px;
}

.kotak,
.bayang {
  box-sizing: border-box;
  height: 34px;
  padding: 7px 12px;
  line-height: 18px;
  font-size: 14px;
}

.kotak {
  background-color: #bfdbfe;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  margin-bottom: 6px;
}

/* Garis putus-putus menandai posisi asli yang tetap dicadangkan */
.bayang {
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  margin-bottom: 6px;
}

.relatif {
  position: relative;
  top: 10px;
  left: 14px;
  background-color: #fecaca;
  border-color: #f87171;
}

/* Induk terposition menjadi acuan pemosisian bagi lencana */
.acuan {
  position: relative;
}

.lencana {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #f59e0b;
  color: #ffffff;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
}

.acuan p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.gulir {
  height: 140px;
  overflow: auto;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

.kepala {
  position: sticky;
  top: 0;
  background-color: #1d4ed8;
  color: #ffffff;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
}

.baris {
  padding: 8px 12px;
  font-size: 14px;
  border-bottom: 1px solid #e2e8f0;
}

</style>
<style>
/* Gaya demo pemosisian: relative, absolute, dan sticky */
body {
  font-family: sans-serif;
  background-color: #eef2f7;
  color: #1f2937;
  margin: 0;
  padding: 16px;
}

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 14px 0 8px; }

.papan {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px;
}

.kotak,
.bayang {
  box-sizing: border-box;
  height: 34px;
  padding: 7px 12px;
  line-height: 18px;
  font-size: 14px;
}

.kotak {
  background-color: #bfdbfe;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  margin-bottom: 6px;
}

/* Garis putus-putus menandai posisi asli yang tetap dicadangkan */
.bayang {
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  margin-bottom: 6px;
}

.relatif {
  position: relative;
  top: 10px;
  left: 14px;
  background-color: #fecaca;
  border-color: #f87171;
}

/* Induk terposition menjadi acuan pemosisian bagi lencana */
.acuan {
  position: relative;
}

.lencana {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #f59e0b;
  color: #ffffff;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
}

.acuan p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.gulir {
  height: 140px;
  overflow: auto;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

.kepala {
  position: sticky;
  top: 0;
  background-color: #1d4ed8;
  color: #ffffff;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
}

.baris {
  padding: 8px 12px;
  font-size: 14px;
  border-bottom: 1px solid #e2e8f0;
}

</style></body>
</html>

Ketiga panel menggunakan berkas index.css yang sama, dan nilai position hanya berada pada kotak yang bersangkutan beserta induk lencana. Apabila bagian relative terasa sulit, perhatikan bahwa garis putus-putus menempati ruang yang sama dengan kotak sebelum bergeser, karena ruang asli relative memang dicadangkan. Pembacaan kode demo juga memperlihatkan pola yang berulang pada proyek nyata: relative untuk acuan, absolute untuk pelengkap, dan sticky untuk kepala yang harus tetap terlihat.

Kesalahan umum#

Kesalahan pertama adalah memberi position: absolute pada elemen tanpa memeriksa leluhurnya. Apabila tidak ada leluhur yang terposition, elemen menempel pada blok penampung awal dan tampak melompat ke tepi halaman. Perbaikannya, beri position: relative pada induk yang dijadikan acuan, atau pastikan leluhur terdekat memang acuan yang dimaksud. Gejala ini mudah dikenali karena elemen menempel pada sudut jendela, bukan pada sudut komponen yang dimaksud.

Kesalahan kedua adalah sticky yang tidak menempel. Penyebabnya umumnya dua: elemen tidak membawa nilai inset seperti top, atau induknya sama tingginya dengan isinya sehingga tidak ada ruang gulir untuk dilintasi. Perbaikannya, nyatakan ambang penempelannya dan pastikan kontainernya dapat menggulir.

Kesalahan ketiga adalah menggunakan absolute untuk menyusun kerangka utama halaman. Elemen absolute keluar dari alur, sehingga tumpang-tindih dan ruang kosong muncul saat isi berubah panjang. Perbaikannya, susun kerangka utama dengan alur normal atau model layout yang sesuai, dan simpan absolute untuk pelengkap visual seperti lencana. Kerangka yang disusun dengan alur normal juga tetap berdiri saat berkas CSS gagal dimuat.

Ringkasan#

  • position: static adalah nilai bawaan, sedangkan relative, absolute, fixed, dan sticky menjadikan elemen terposition dan siap menerima offset inset.
  • relative menggeser kotak tanpa membebaskan ruang aslinya, dan sekaligus menjadi acuan bagi keturunan absolute.
  • absolute keluar dari alur dan menempel pada leluhur terposition terdekat, fixed menempel pada viewport, sedangkan sticky menempel pada kontainer gulirnya setelah melintasi ambang.
  • Offset dinyatakan dengan top, right, bottom, dan left, atau ringkasnya dengan inset.

Referensi#