Hogyan működik a z-index és a stacking contexts?

Question

IT Interview Practice · Accepted Answer

`z-index` vezérli az átfedő elemek **elöl-hátul** halmozási sorrendjét — a magasabb értékek felül helyezkednek el. De csak **pozicionált** elemekre működik, és egy **stacking context** *belül* működik, ami a legtöbb z-index zavar forrása.

```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` **figyelmen kívül hagyva van** a `position: static` (alapértelmezett) értéken — az elemnek `relative`, `absolute`, `fixed`, vagy `sticky` értékűnek kell lennie ahhoz, hogy érvényes legyen.

## Stacking contexts — a csapda

Az stacking context önálló "réteg". A `z-index` értékek csak **azonos kontextusban** versenyeznek — a gyermek soha *nem* menekülhet a szülőjének halmozási szintjéből, függetlenül attól, hogy mekkora az z-index értéke.

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

Ez az klasszikus "az én z-index: 9999 modális még mindig valami mögött van" hiba — a modális egy olyan szülőben van csapdázva, amely alacsonyabb szinten van.

## Mi hoz létre új stacking contextust

Numerikus tulajdonságok csendben hoznak létre egyet, ami csapdázhat leszármazottakat:

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

## A megoldás

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

A gyakorlatban renderelj modálokat/tooltipeket a DOM tetejére (React portals), hogy ne legyenek csapdázva egy alacsonyabb szintű szülőben.

## Miért számít

A stacking contexts megmagyarázzák a legzavaróbb z-index hibákat: egy hatalmas z-index, amely még mindig veszít, mert az ősének alacsonyabb szintje van.

Az ismerete, hogy az `opacity`, `transform`, és positioned-z-index kontextusokat hoznak létre — és hogy a gyermekek nem menekülhetnek belőlük — lehetővé teszi az overlay/dropdown sorrend hibakeresésének és a DOM (portals) helyes szerkezetének megtervezésének.

Stacking contexts — a csapda

Mi hoz létre új stacking contextust

A megoldás

Miért számít

Kapcsolódó kérdések