Piye carane z-index lan stacking contexts bisa bisa?

Question

Accepted Answer

`z-index` ngontrol urutan stacking **depan-menyang-mburi** saka elemen-elemen sing overlapping — nilai sing luwih dhuwur dumunung ing ndhuwur. Nanging iku mung bisa makarya ing elemen-elemen sing **positioned**, lan iku bisa beroperasi *ing* **stacking context**, sing dadi sumber saka sebagian besar kebingungan z-index.

```css
.modal   { position: fixed; z-index: 100; }   /* on top */
.overlay { position: fixed; z-index: 99; }    /* just below */
.content { position: relative; z-index: 1; }
```

`z-index` **diabaikan** ing `position: static` (default) — elemen kudu `relative`, `absolute`, `fixed`, utawa `sticky` ben iku bisa makarya.

## Stacking contexts — jebakan-e

Stacking context iku "layer" sing mandiri. `z-index` values mung bisa bersaing **ing stacking context sing padha** — putri ora bisa *nglilir* level stacking parenthe, gaya apa tuwas z-index-e.

```css
.parent-a { position: relative; z-index: 1; }
.parent-b { position: relative; z-index: 2; }

.child-of-a { position: absolute; z-index: 9999; }
/* ❌ child-of-a STILL renders below everything in parent-b, */
/*    because parent-a (z-index 1) is entirely below parent-b (z-index 2). */
```

Iki bug klasik "z-index: 9999 modal-ku isih ana ing njobo saka sapa-sapa" — modal trapped ing parent sing ana ing layer sing luwih murah.

## Apa sing nggawa stacking context anyar

Sakjane akeh sifat sing nggawa siji kanthi senyap, sing bisa menjebak keturunan:

```text
- position + z-index (other than auto)
- opacity less than 1
- transform, filter, will-change
- isolation: isolate
- a flex/grid item with z-index
```

## Solusi-e

```css
/* render the modal at the document root (outside trapping parents) — "portal" */
.isolated { isolation: isolate; } /* deliberately create a context where you want one */
```

Sakjane, render modals/tooltips ing puncak DOM (React portals) mula ora trapped ing parent layer sing murah.

## Napa iki penting

Stacking contexts jelaske bugs z-index sing paling kebingungan: z-index sing gedhe banget sing isih elinga amarga ancestor-e ana ing layer sing luwih murah.

Meneng yen `opacity`, `transform`, lan positioned-z-index nggawa contexts — lan yen putri ora bisa nglilir-e — nglilir-mu overlay/dropdown ordering lan struktur DOM-mu (portals) kanthi bener.