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:

1. Apakah elemen masih mengikuti alur normal?
2. Apakah elemen membentuk atau masuk ke stacking context tertentu?
3. Apakah elemen punya z-index yang relevan di konteksnya?
4. Apakah elemen dipotong oleh overflow dari ancestor?
5. 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

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

Kasus 1: dropdown kepotong

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?

Kasus 2: tooltip kalah di belakang card

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

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

• Box Model
• Specificity dan Cascade