CSS Positioning Overflow Stacking Context

Definisi

position, z-index, overflow, dan stacking context adalah empat konsep CSS yang sangat sering dipakai saat debug layout.

Kalau disederhanakan:

position menentukan bagaimana elemen ditempatkan.
z-index menentukan urutan tumpukan di sumbu depan-belakang, tapi hanya bekerja dalam aturan stacking context.
overflow menentukan apa yang terjadi saat isi elemen lebih besar daripada kotaknya.
stacking context menentukan “ruang tumpukan” tempat z-index dihitung.

Masalah layout seperti elemen tertutup, dropdown hilang di belakang komponen lain, tooltip kepotong, atau sticky tidak bergerak biasanya bukan satu bug tunggal. Seringnya, itu gabungan dari posisi, tumpukan, dan batas overflow.

Fungsi utama

Konsep ini dipakai untuk:

memindahkan elemen dari alur normal dokumen
menempelkan elemen ke viewport atau scroll container
mengatur lapisan visual antar elemen
mencegah atau mengizinkan konten meluber
memahami kenapa z-index: 9999 kadang tetap kalah

Cara kerja ringkas

Urutan berpikir yang aman saat debug adalah:

Apakah elemen masih mengikuti alur normal?
Apakah elemen membentuk atau masuk ke stacking context tertentu?
Apakah elemen punya z-index yang relevan di konteksnya?
Apakah elemen dipotong oleh overflow dari ancestor?
Apakah posisi elemen dipengaruhi containing block atau scroll container?

Inti penting

position mengubah cara browser menghitung letak elemen.
z-index hanya efektif pada elemen yang membentuk konteks tumpukan yang relevan.
overflow bisa memotong isi, termasuk popup, tooltip, dan bayangan visual tertentu.
stacking context membuat lapisan baru yang tidak bisa ditembus sembarang z-index dari luar.

`position`: static, relative, absolute, fixed, sticky

`position: static`

Ini adalah nilai default.

Ciri utamanya:

elemen tetap mengikuti normal flow
properti top, right, bottom, left, dan z-index tidak memberi efek visual yang diharapkan
elemen tidak “diangkat” dari alur dokumen

Pakai ini saat tidak ada kebutuhan positioning khusus.

`position: relative`

Elemen tetap berada di alur normal, tetapi bisa digeser secara visual dengan offset.

Ciri penting:

ruang aslinya tetap dipertahankan
elemen terlihat bergeser, tetapi saudara elemennya tetap menganggap posisinya asli
sering dipakai sebagai referensi untuk anak absolute

Contoh umum:

css

.badge-wrap {
  position: relative;
}
 
.badge {
  position: absolute;
  top: 0;
  right: 0;
}

Di sini, relative bukan untuk memindahkan wrapper secara besar-besaran, tapi untuk memberi titik referensi pada anak absolute.

`position: absolute`

Elemen keluar dari normal flow.

Ciri penting:

tidak lagi menyisakan ruang seperti elemen biasa
posisinya dihitung terhadap containing block terdekat yang relevan
kalau tidak ada ancestor yang cocok, browser akan jatuh ke referensi yang lebih tinggi, seringnya viewport atau initial containing block

Pakai ini untuk:

dropdown
overlay kecil
badge
elemen yang harus menempel di sudut container

Jebakan umum:

lupa memberi ancestor position: relative
berharap absolute tetap memengaruhi layout saudara elemen
bingung karena elemen muncul di tempat yang “tidak sesuai container”

`position: fixed`

Elemen diposisikan relatif ke viewport.

Ciri penting:

biasanya tetap diam saat halaman scroll
keluar dari normal flow
sering dipakai untuk navbar tetap, floating action button, atau toast

Catatan penting:

pada beberapa kondisi, ancestor tertentu bisa memengaruhi perilaku fixed melalui transform atau containment tertentu
fixed tidak otomatis berarti paling depan; tetap bisa kalah oleh stacking context dan overflow tertentu di lingkungan spesifik

`position: sticky`

Sticky adalah gabungan perilaku relatif dan fixed.

Ciri penting:

elemen mengikuti alur normal dulu
saat scroll mencapai batas tertentu, elemen “menempel”
butuh nilai offset seperti top: 0
sering gagal kalau container induknya punya overflow atau tinggi yang tidak mendukung

Contoh:

css

.sidebar-title {
  position: sticky;
  top: 0;
  z-index: 10;
}

Sticky sangat berguna untuk header tabel, label sidebar, atau section title yang ingin tetap terlihat saat scroll.

Perbedaan cepat nilai `position`

Nilai	Masuk normal flow	Bisa offset	Referensi umum	Kasus umum
`static`	Ya	Tidak efektif	Alur dokumen	Default
`relative`	Ya	Ya	Posisi aslinya sendiri	Nudge kecil, parent referensi
`absolute`	Tidak	Ya	Ancestor terdekat yang diposisikan	Badge, dropdown, overlay
`fixed`	Tidak	Ya	Viewport	Header tetap, FAB, toast
`sticky`	Ya, lalu menempel	Ya	Scroll container / viewport	Header sticky, sidebar

`z-index` dan urutan lapisan

z-index mengatur urutan elemen yang saling bertumpuk.

Namun ada batasnya:

z-index tidak bekerja seperti angka mutlak di seluruh halaman
nilainya dibandingkan di dalam stacking context yang sama
anak dengan z-index: 9999 tetap bisa kalah dari elemen luar konteksnya

Kapan `z-index` bekerja

Biasanya pada elemen yang:

position-nya bukan static pada banyak kasus umum
menjadi flex/grid item dalam konteks tertentu
berada dalam stacking context yang memang membandingkan layer

Kapan `z-index` terasa “tidak mempan”

Penyebab paling sering:

elemen berada di stacking context berbeda
parent punya transform, opacity < 1, filter, isolation, will-change, contain, atau properti lain yang membentuk konteks baru
elemen terpotong oleh overflow: hidden/auto/scroll
ada portal, overlay root, atau struktur DOM yang membagi konteks lapisan

Stacking context

Stacking context adalah sistem lapisan lokal. Begitu sebuah elemen membentuk stacking context, semua anaknya diperingkat di dalam konteks itu dulu sebelum dibandingkan dengan elemen luar.

Bayangkan seperti folder tumpukan:

di dalam folder, urutan bisa sangat detail
tapi folder itu sendiri diperlakukan sebagai satu unit saat dibandingkan dari luar

Apa yang bisa membentuk stacking context

Yang paling sering ditemui:

root element (<html>)
elemen dengan position tertentu dan z-index selain auto
elemen dengan opacity kurang dari 1
elemen dengan transform
elemen dengan filter, perspective, clip-path, mask
elemen dengan isolation: isolate
elemen dengan contain: paint atau kombinasi containment tertentu

Kenapa penting saat debug

Kalau popup terlihat kalah lapisan, pertanyaan utamanya bukan langsung “naikkan z-index berapa?”. Pertanyaan yang benar:

popup ada di stacking context mana?
lawannya ada di context mana?
apakah ancestor membentuk context yang membatasi anaknya?

Overflow: visible, hidden, auto, scroll, clip

overflow mengatur apakah isi yang melebihi kotak elemen akan ditampilkan penuh, dipotong, atau dibuat scroll.

`overflow: visible`

Isi yang meluber tetap terlihat.

Cocok kalau:

elemen memang dibiarkan melebar keluar kotak
ada tooltip atau shadow yang tidak ingin dipotong

`overflow: hidden`

Isi yang keluar dari kotak dipotong.

Cocok untuk:

masking gambar
card dengan border-radius
mencegah content leak

Jebakan umum:

dropdown atau tooltip dipotong tanpa disadari
sticky anak gagal karena ancestor memotong area scroll

`overflow: auto`

Scrollbar muncul jika dibutuhkan.

Cocok untuk:

panel data
sidebar dengan konten panjang
area scroll internal

`overflow: scroll`

Scrollbar disediakan walau isi belum tentu meluber.

Dipakai lebih jarang karena lebih agresif.

`overflow: clip`

Memotong isi tanpa membuat area scroll seperti hidden.

Ini berguna saat benar-benar ingin membatasi tampilan tanpa scrolling internal.

Kapan elemen terlihat tertutup atau meluber

Elemen tertutup

Elemen terlihat tertutup jika:

ada elemen lain dengan layer lebih tinggi dalam stacking context yang sama
elemen berada di konteks tumpukan yang kalah
parent menurunkan atau membatasi layering anak
elemen ada di bawah overlay, modal, atau sticky header

Elemen meluber

Elemen terlihat meluber jika:

content lebih besar dari container
overflow dibiarkan visible
absolute child keluar dari kotak parent
ukuran fixed atau min-width melebihi ruang tersedia

Elemen meluber tapi tetap tidak terlihat

Ini biasanya kombinasi:

elemen secara logika keluar dari kotak
tetapi terpotong oleh overflow: hidden/clip/auto/scroll
atau tertutup oleh stacking context lain

Contoh debugging cepat

Gejala:

dropdown muncul, tapi bagian bawahnya hilang

Cek:

apakah ancestor punya overflow: hidden?
apakah dropdown berada di dalam container scroll?
apakah lebih aman dipindah ke portal atau overlay root?

Gejala:

tooltip muncul, tapi tidak terlihat penuh

Cek:

apakah card atau parent membentuk stacking context?
apakah tooltip punya z-index di konteks yang benar?
apakah ada transform atau opacity pada ancestor?

Kasus 3: sticky tidak menempel

Gejala:

elemen tetap scroll biasa, tidak sticky

Cek:

apakah ada top: 0 atau offset lain?
apakah parent memiliki overflow yang memutus sticky?
apakah container scroll-nya memang ancestor yang tepat?

Ilustrasi Visual

Diagram berikut membantu melihat posisi, tumpukan, dan batas area secara bersamaan.

Excalidraw dipakai untuk bentuk, ruang, dan layering.
Mermaid dipakai untuk urutan keputusan saat debug.

::preview

Loading diagram...

Catatan implementasi

Untuk elemen overlay, siapkan layer root yang jelas, misalnya modal root atau portal root.
Untuk badge kecil di sudut card, gunakan parent position: relative lalu anak absolute.
Untuk header sticky, pastikan offset eksplisit seperti top: 0.
Jangan mengandalkan z-index besar sebagai solusi tunggal.
Cek dulu apakah masalahnya layering, clipping, atau containment.
Saat debug, baca ancestor satu per satu, bukan hanya elemen yang kelihatan bermasalah.
Kalau ingin elemen bisa tampil keluar batas, jangan pasang overflow clipping di parent yang tidak perlu.

Kesalahan umum

Mengira z-index: 9999 selalu menang.
Lupa bahwa z-index dibandingkan di dalam stacking context.
Memberi absolute tanpa ancestor referensi yang tepat.
Memakai overflow: hidden lalu heran dropdown terpotong.
Mengira sticky akan bekerja di semua container scroll.
Menggunakan fixed tapi lupa bahwa konteks visual di sekitar bisa tetap memengaruhi layering.

Istilah

Normal flow: alur layout default dokumen.
Containing block: referensi geometri tempat posisi elemen dihitung.
Stacking context: konteks lokal untuk menentukan tumpukan elemen.
Stack level: urutan elemen di dalam stacking context.
Overflow clipping: pemotongan isi yang melampaui kotak elemen.
Sticky boundary: batas tempat elemen sticky mulai atau berhenti menempel.

Referensi terkait

CSS Positioning Overflow Stacking Context | Rujukan Pemrograman | Mahir.dev Academy

CSS Positioning Overflow Stacking Context

Selesai membaca dokumentasi ini?

CSS Positioning Overflow Stacking Context

Definisi

Fungsi utama

Cara kerja ringkas

Inti penting

`position`: static, relative, absolute, fixed, sticky

`position: static`

`position: relative`

`position: absolute`

`position: fixed`

`position: sticky`

Perbedaan cepat nilai `position`

`z-index` dan urutan lapisan

Kapan `z-index` bekerja

Kapan `z-index` terasa “tidak mempan”

Stacking context

Apa yang bisa membentuk stacking context

Kenapa penting saat debug

Overflow: visible, hidden, auto, scroll, clip

`overflow: visible`

`overflow: hidden`

`overflow: auto`

`overflow: scroll`

`overflow: clip`

Kapan elemen terlihat tertutup atau meluber

Elemen tertutup

Elemen meluber

Elemen meluber tapi tetap tidak terlihat

Contoh debugging cepat

Kasus 2: tooltip kalah di belakang card

Kasus 3: sticky tidak menempel

Ilustrasi Visual

Catatan implementasi

Kesalahan umum

Istilah

Referensi terkait

Selesai membaca dokumentasi ini?

CSS Positioning Overflow Stacking Context

Definisi

Fungsi utama

Cara kerja ringkas

Inti penting

position: static, relative, absolute, fixed, sticky

position: static

position: relative

position: absolute

position: fixed

position: sticky

Perbedaan cepat nilai position

z-index dan urutan lapisan

Kapan z-index bekerja

Kapan z-index terasa “tidak mempan”

Stacking context

Apa yang bisa membentuk stacking context

Kenapa penting saat debug

Overflow: visible, hidden, auto, scroll, clip

overflow: visible

overflow: hidden

overflow: auto

overflow: scroll

overflow: clip

Kapan elemen terlihat tertutup atau meluber

Elemen tertutup

Elemen meluber

Elemen meluber tapi tetap tidak terlihat

Contoh debugging cepat

Kasus 1: dropdown kepotong

Kasus 2: tooltip kalah di belakang card

Kasus 3: sticky tidak menempel

Ilustrasi Visual

Catatan implementasi

Kesalahan umum

Istilah

Referensi terkait

`position`: static, relative, absolute, fixed, sticky

`position: static`

`position: relative`

`position: absolute`

`position: fixed`

`position: sticky`

Perbedaan cepat nilai `position`

`z-index` dan urutan lapisan

Kapan `z-index` bekerja

Kapan `z-index` terasa “tidak mempan”

`overflow: visible`

`overflow: hidden`

`overflow: auto`

`overflow: scroll`

`overflow: clip`