Kuinka z-index ja stacking contexts toimivat?

Question

Accepted Answer

`z-index` ohjaa päällekkäisten elementtien **etu-taka** järjestyskerroksen — korkeammat arvot ovat päällä. Mutta se toimii vain **positionoiduissa** elementeissä ja se toimii *sisällä* **stacking contextin**, joka on lähde useimmille z-index-sekaannukselle.

```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` on **huomiotta** `position: static` -kohteella (oletus) — elementin tulee olla `relative`, `absolute`, `fixed` tai `sticky`, jotta se toimii.

## Stacking contexts — sudenkuoppa

Stacking context on itsenäinen "kerros". `z-index`-arvot kilpailevat vain **saman kontekstin sisällä** — lapsi ei voi koskaan paeta isänsä kerroskerroksen tasolta, riippumatta siitä, kuinka korkea sen z-index on.

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

Tämä on klassinen "minun z-index: 9999 modaali on silti jonkin takana" -virhe — modaali on loukoissa vanhemmassa, joka on alemmalla kerroksella.

## Mitä luo uuden stacking contextin

Monet ominaisuudet luovat yhden äänettömästi, mikä voi loukkailla jälkeläisiä:

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

## Ratkaisu

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

Käytännössä hahmonna modaalit/työkaluvihjeet DOM:n yläosassa (React portals), jotta ne eivät jää loukuissa matalan kerroksen vanhemmassa.

## Miksi se on tärkeää

Stacking contexts selittävät hämmentävimmät z-index-virheet: valtava z-index, joka silti häviää, koska sen esi-isä on alemmalla kerroksella.

Tietäen, että `opacity`, `transform` ja positioned-z-index luovat konteksteja — ja että lapset eivät voi paeta niistä — voit tehdä virheenkorjausta peittävän/avattavan listan järjestykselle ja jäsentää DOM:si (portaalit) oikein.