Как работают z-index и stacking contexts?

Question

Accepted Answer

`z-index` управляет **передне-задним** порядком наложения перекрывающихся элементов — более высокие значения лежат сверху. Но работает только на **позиционированных** элементах и работает *внутри* **stacking context**, что является источником большинства путаницы с 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` **игнорируется** на `position: static` (по умолчанию) — элемент должен быть `relative`, `absolute`, `fixed` или `sticky`, чтобы применяться.

## Почему это важно

Stacking context — это самодостаточный "слой". Значения `z-index` конкурируют только **внутри одного контекста** — потомок никогда не может выйти из уровня наложения родителя, независимо от того, насколько высок 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). */
```

Это классическая ошибка "мой z-index: 9999 модальное окно все еще позади чего-то" — модальное окно зажато внутри родителя, который находится на более низком слое.

## Что создает новый stacking context

Много свойств молча создают его, что может захватить потомков:

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

## Решение

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

На практике рендерьте модальные окна/подсказки в верхней части DOM (React portals), чтобы они не застревали в родителе с более низким слоем.

## Почему это важно

Stacking contexts объясняют самые запутанные ошибки z-index: огромный z-index, который все еще проигрывает, потому что его предок находится на более низком слое.

Знание того, что `opacity`, `transform` и positioned-z-index создают контексты — и что потомки не могут из них выбраться — позволяет вам отладить порядок наложения/выпадающих меню и правильно структурировать ваш DOM (portals).