csspositionlayoutMenengah5 mnt baca

Position: Absolute, Fixed, Sticky

Keluar dari alur normal: absolute mengacu jangkar, fixed mengacu viewport, sticky gabungan keduanya.

Absolute: lepas dari alur

css

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

Elemen absolute keluar dari alur normal: ruangnya tidak dipesan, elemen lain seolah ia tidak ada. Posisinya mengacu ke leluhur terdekat yang positioned (relative/absolute/fixed/sticky). Kalau tidak ada, mengacu ke <html>.

Pola wajibnya selalu berpasangan:

css

.induk { position: relative; }  /* jangkar */
.anak  { position: absolute; top: 0; right: 0; }

Fixed: menempel di viewport

css

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

Fixed mengacu ke viewport, tidak ikut scroll. Cocok untuk navbar, tombol back-to-top, atau chat widget. Ingat: elemen di bawahnya perlu padding-top kompensasi karena fixed keluar dari alur.

Sticky: gabungan keduanya

css

.subnav {
  position: sticky;
  top: 0;
}

Sticky bersikap relative sampai scroll mencapai ambang top, lalu "menempel" seperti fixed. Syarat: induknya harus lebih tinggi dari elemen, dan tidak ada overflow: hidden pada leluhur yang memotongnya.

Catatan teknis: absolute/fixed tanpa width yang ditentukan akan "menciut" mengikuti konten (shrink-to-fit), tidak lagi full-width seperti block normal. Tentukan width secara eksplisit bila perlu.

Kapan memakai apa? (panduan memilih)

Kebutuhan	Pilihan
Badge di pojok kartu	absolute + induk relative
Navbar selalu terlihat	fixed atau sticky
Tooltip mengikuti elemen	absolute
Modal di tengah layar	fixed + inset 0
Header tabel yang menempel saat scroll	sticky

css

.menu-item {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 100%;      /* tepat di bawah induk */
  left: 0;
  min-width: 200px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: none;
}

.menu-item:hover .dropdown {
  display: block;
}

Pola dropdown CSS murni: induk relative sebagai jangkar, dropdown absolute di bawahnya, tampil saat hover.

Jebakan

Fixed di dalam transform. Leluhur dengan transform membuat fixed mengacu ke leluhur itu, bukan viewport! Modal fixed di dalam elemen ber-transform akan ikut scroll. Solusi: render modal di luar elemen ber-transform (atau di akhir body).

Lupa kompensasi fixed navbar. Navbar fixed keluar dari alur: konten di bawahnya tertutup. Selalu beri padding-top pada body/konten setinggi navbar.

Tips profesional

Untuk modal: pakai position: fixed; inset: 0; lalu flexbox centering di overlay. Jangan pakai absolute untuk modal karena ia ikut scroll.
Sticky + top wajib berpasangan; tanpa nilai ambang, sticky tidak tahu kapan harus "menempel".
Elemen absolute tanpa width akan menyusut mengikuti konten (shrink-to-fit). Tentukan width atau left+right bila butuh lebar pasti.

Rangkuman

Absolute = keluar alur + mengacu jangkar terdekat. Fixed = keluar alur + mengacu viewport + tidak ikut scroll. Sticky = relative yang bisa menempel. Selalu pasangkan absolute dengan induk relative.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tombol Kembali ke Atas

Di playground:

Ubah .chat-btn menjadi tombol "kembali ke atas": pindahkan ke kiri bawah (left: 20px, hapus right), ganti isi "?" menjadi panah atas (pakai karakter ↑, bukan emoji).
Buat navbar fixed baru di HTML: position: fixed; top: 0; left: 0; right: 0; dengan background navy. Tambahkan padding-top pada body agar konten tidak tertutup.
Di komentar, jelaskan kenapa sticky butuh induk yang lebih tinggi.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox