Kaip veikia z-index ir stack'o kontekstai?

Question

Accepted Answer

`z-index` kontroliuoja **priekio-į-nuo-fono** persidengusių elementų sluoksnio tvarką — didesnes reikšmės yra viršuje. Tačiau tai veikia tik **pozicionuotuose** elementuose ir veikia *turėdamas omenyje* **stack'o kontekstą**, kuris yra daugiau nei pagrindinis z-index painiavos šaltinis.

```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` yra **neveiksminga** `position: static` (numatytoji reikšmė) — elementas turi būti `relative`, `absolute`, `fixed` arba `sticky`, kad tai veiktų.

## Stack'o kontekstai — pagrindinė problema

Stack'o kontekstas yra savipakankamas "sluoksnis." `z-index` reikšmės konkuruoja tik **tame pačiame kontekste** — vaikas niekada negali ištrūkti iš savo tėvo sluoksnio lygio, nepriklausomai nuo to, koks yra jo z-index.

```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). */
```

Tai klasikinis "mano z-index: 9999 modalas vis tiek yra kažko nugaroje" klaida — modalas yra guoliukas tėvą, kuris yra žemesniame sluoksnyje.

## Kas sukuria naują stack'o kontekstą

Daug savybių šilumoje sukuria vieną, kuri gali spąsti palikuonims:

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

## Sprendimas

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

Praktikoje atvaizduokite modalis/tooltip'us DOM viršuje (React portalai), kad jie nebūtų guoliukai žemą sluoksnį turinčiame tėvą.

## Kodėl tai svarbu

Stack'o kontekstai paaiškina pačias kebliausias z-index klaidas: didžiulė z-index reikšmė, kuri vis tiek pralaimi, nes jos pirmtaka yra žemesniame sluoksnyje.

Žinant, kad `opacity`, `transform` ir pozicionuotas-z-index sukuria kontekstus — ir kad vaikai negali iš jų ištrūkti — jūs galite išrūšiuoti perdangų/dropdown'ų tvarkymo klaidas ir tinkamai susitvarkyti jūsų DOM (portalais).