Dokumentasi CSS interaktif: Position

Q: Bagaimana cara memosisikan elemen secara absolute relatif terhadap elemen induknya?

Beri elemen induk position: relative; dan child position: absolute; dengan offset seperti top: 0; right: 0;. Tanpa elemen induk yang diposisikan, child ditempatkan relatif terhadap halaman.

Q: Apa perbedaan position relative dan absolute?

relative menjaga elemen tetap di dalam flow dan hanya menggeser posisi gambarnya, sambil meninggalkan ruang aslinya. absolute mengeluarkannya dari flow dan menempatkannya relatif terhadap ancestor yang diposisikan.

Q: Kenapa position: sticky tidak berfungsi?

Biasanya karena salah satu dari tiga hal: tidak ada top (atau offset lain) yang ditetapkan, ada ancestor dengan overflow: hidden atau auto yang menjadi scroll container, atau elemen induk dari elemen sticky tidak lebih tinggi dari elemen itu, jadi tidak ada ruang untuk menempel.

Q: Apa perbedaan fixed dan sticky?

fixed dikeluarkan dari flow dan dipaku ke viewport (kecuali ada ancestor dengan transform atau filter). sticky tetap di dalam flow dan ikut ter-scroll seperti biasa sampai mencapai offset-nya, lalu menempel selama elemen induknya masih terlihat di layar.

CSS Position Absolute, Relative, Fixed dan Sticky

position: absolute menempatkan elemen di koordinat yang tepat di dalam ancestor terdekat yang diposisikan. Pelajari cara kerja absolute bersama position: relative, lalu fixed dan sticky, property top/right/bottom/left dan inset, serta kenapa sticky kadang tidak menempel.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

position: absolute dalam satu contoh

Elemen yang diposisikan secara absolute diangkat keluar dari normal flow lalu ditempatkan dengan top, right, bottom, dan left. Offset itu diukur dari ancestor terdekat yang punya position selain static, itulah sebabnya elemen induk diberi position: relative:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute inside relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      position: relative;          /* the reference box */
      width: 260px; padding: 20px;
      background: #f3f4f6; border: 2px solid #111827;
    }
    .badge {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 2px 8px;
      background: #dc2626; color: white; font-size: 12px; border-radius: 999px;
    }
  </style>
</head>
<body>
  <div class="card" id="card">
    <span class="badge" id="badge">New</span>
    <h3>Card title</h3>
    <p>The badge sits 8px from the top and right edges of the card.</p>
  </div>
</body>
</html>

Hapus position: relative dari .card, maka badge-nya melompat ke kanan atas seluruh halaman, karena tidak lagi punya ancestor yang diposisikan. Satu baris itu menjelaskan sebagian besar pertanyaan "position absolute tidak berfungsi".

Hal yang perlu diketahui tentang elemen absolute:

Elemen ini tidak memakan ruang. Judul dan paragraf ditata seolah-olah badge itu tidak ada.
Lebarnya menyusut sesuai isinya, kecuali kamu menetapkan width atau left dan right sekaligus.
Offset diukur sampai tepi padding containing block, di dalam border-nya.

Lima nilai position

Nilai	Di dalam flow?	Offset diukur dari	Penggunaan umum
`static` (default)	Ya	Offset diabaikan	Elemen biasa
`relative`	Ya, ruangnya tetap disimpan	Posisi normalnya sendiri	Patokan untuk child absolute, geseran kecil
`absolute`	Tidak	Ancestor terdekat yang diposisikan (atau halaman)	Badge, tooltip, overlay, tombol tutup
`fixed`	Tidak	Viewport	Header, tombol chat, bar cookie
`sticky`	Ya	Scroll container-nya, begitu mencapai offset	Header tabel, judul bagian, sidebar

position: relative

Elemen yang diposisikan secara relative tetap berada di tempatnya semula di dalam flow. Offset memindahkan posisi gambarnya, tetapi ruang aslinya tetap disediakan, jadi tidak ada yang bergeser di sekitarnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; }
    .row div { width: 80px; padding: 16px 0; text-align: center; background: #bfdbfe; border: 2px solid #2563eb; }
    .row .moved {
      position: relative;
      top: 20px;
      left: 20px;
      background: #fde68a; border-color: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="row">
    <div>1</div>
    <div class="moved" id="moved">2</div>
    <div id="three">3</div>
  </div>
</body>
</html>

Kotak 2 digambar 20px ke bawah dan 20px ke kanan, menimpa kotak 3, tetapi kotak 3 tidak bergeser: kotak itu tetap menyisakan ruang untuk kotak 2 di posisi aslinya. Sendirian, relative jarang dipakai untuk memindahkan sesuatu. Tugas utamanya adalah menjadi kotak patokan untuk child yang absolute.

Offset dan inset

top, right, bottom, dan left menerima panjang, persentase (dari containing block), dan auto. Shorthand inset mengatur keempatnya dengan urutan yang sama seperti margin:

.overlay {
  position: absolute;
  inset: 0;              /* top: 0; right: 0; bottom: 0; left: 0; */
}
.corner {
  position: absolute;
  inset: auto 16px 16px auto;  /* bottom right corner, 16px in */
}

Mengatur sisi yang berlawanan akan meregangkan elemen: left: 0; right: 0 membuatnya selebar containing block. inset: 0 pada child absolute adalah cara standar untuk menutupi kartu dengan overlay.

Menengahkan dengan absolute dan transform

top: 50%; left: 50% menaruh sudut kiri atas elemen di titik tengah. translate(-50%, -50%) lalu menggesernya kembali sebesar setengah ukurannya sendiri:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    .stage { position: relative; height: 180px; background: #e5e7eb; }
    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: #2563eb; color: white; font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <div class="stage" id="stage"><div class="center" id="c">Centered</div></div>
</body>
</html>

Flexbox dan grid lebih sederhana untuk menengahkan kalau elemennya bisa tetap di dalam flow. Halaman center a div membandingkan semua caranya.

position: fixed

Elemen fixed ditempatkan relatif terhadap viewport dan tetap di sana saat halaman di-scroll:

.chat-button {
  position: fixed;
  bottom: 16px;
  right: 16px;
}

Ada dua jebakan. Elemen fixed tidak memakan ruang, jadi header fixed menutupi bagian atas halaman kecuali kamu menambahkan padding-top pada body. Lalu, kalau ada ancestor yang punya transform, filter, atau perspective, ancestor itulah yang menjadi kotak patokan, bukan viewport, jadi elemennya ikut ter-scroll bersamanya.

position: sticky

Elemen sticky ikut ter-scroll seperti biasa sampai mencapai offset-nya, lalu menempel di sana sampai ujung elemen induknya ter-scroll lewat. Scroll kotak di bawah:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .scroller { height: 220px; overflow-y: auto; border: 2px solid #111827; }
    h3 {
      position: sticky;
      top: 0;
      margin: 0; padding: 8px 12px;
      background: #2563eb; color: white;
    }
    p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="scroller" id="scroller">
    <section>
      <h3>A</h3>
      <p>Adams</p><p>Allen</p><p>Alvarez</p><p>Anderson</p><p>Arnold</p>
    </section>
    <section>
      <h3>B</h3>
      <p>Baker</p><p>Bell</p><p>Brooks</p><p>Brown</p><p>Bryant</p>
    </section>
    <section>
      <h3>C</h3>
      <p>Campbell</p><p>Carter</p><p>Clark</p><p>Collins</p><p>Cooper</p>
    </section>
  </div>
</body>
</html>

Setiap huruf menempel di bagian atas kotak scroll selama bagiannya terlihat, lalu terdorong pergi oleh huruf berikutnya, karena elemen sticky tidak pernah keluar dari elemen induknya.

Kalau sticky tidak menempel, periksa hal-hal ini:

Tidak ada offset. position: sticky tidak berpengaruh apa-apa tanpa top, bottom, left, atau right.
Ada ancestor dengan overflow: hidden, auto, atau scroll. Ancestor itu menjadi scroll container, dan kalau ia tidak benar-benar bisa di-scroll, tidak ada yang menempel. Pakai overflow: clip kalau kamu hanya perlu menyembunyikan overflow.
Elemen induk yang tidak lebih tinggi dari elemen sticky. Tidak ada ruang untuk menempel di dalamnya.
Elemen induk flex atau grid yang meregangkannya. Di baris flex, tambahkan align-self: flex-start pada sidebar yang sticky.

Kesalahan yang sering terjadi

Lupa memberi position: relative pada elemen induk dari elemen absolute.
Memakai absolute untuk layout halaman. Elemen absolute mengabaikan satu sama lain dan juga kontennya, jadi teks saling menimpa di layar yang lebih kecil. Pakai flexbox atau grid untuk layout, dan absolute untuk hiasan kecil.
Offset pada elemen static. top: 10px tidak berpengaruh tanpa position.
Bingung elemen mana yang berada di atas. Elemen terposisi yang saling menimpa diurutkan oleh z-index.
Header fixed menutupi konten. Tambahkan padding pada halaman, atau scroll-padding-top supaya link anchor mendarat di bawah header.

Pertanyaan yang sering diajukan

Apa fungsi position: absolute?

Deklarasi ini mengeluarkan elemen dari normal flow (elemen lain bersikap seolah-olah elemen itu tidak ada) lalu menempatkannya dengan top, right, bottom, dan left, diukur dari containing block-nya: ancestor terdekat yang position-nya bukan static.

Bagaimana cara memosisikan elemen secara absolute relatif terhadap elemen induknya?

Beri elemen induk position: relative; dan child position: absolute; dengan offset seperti top: 0; right: 0;. Tanpa elemen induk yang diposisikan, child ditempatkan relatif terhadap halaman.

Apa perbedaan position relative dan absolute?

relative menjaga elemen tetap di dalam flow dan hanya menggeser posisi gambarnya, sambil meninggalkan ruang aslinya. absolute mengeluarkannya dari flow dan menempatkannya relatif terhadap ancestor yang diposisikan.

Kenapa position: sticky tidak berfungsi?

Biasanya karena salah satu dari tiga hal: tidak ada top (atau offset lain) yang ditetapkan, ada ancestor dengan overflow: hidden atau auto yang menjadi scroll container, atau elemen induk dari elemen sticky tidak lebih tinggi dari elemen itu, jadi tidak ada ruang untuk menempel.

Apa perbedaan fixed dan sticky?

fixed dikeluarkan dari flow dan dipaku ke viewport (kecuali ada ancestor dengan transform atau filter). sticky tetap di dalam flow dan ikut ter-scroll seperti biasa sampai mencapai offset-nya, lalu menempel selama elemen induknya masih terlihat di layar.

Konsep terkait