Что такое stacking context в CSS

Что проверяют

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

Как отвечать

Контекст наложения это группа элементов, которая упорядочивается по оси Z как единое целое. Главное правило: z-index сравнивается только между соседями внутри одного контекста. Если родитель с z-index: 1 лежит ниже соседа с z-index: 2, его ребёнок с z-index: 9999 тоже окажется ниже.

Новый контекст создают:

• корень документа <html>;
• позиционированный элемент (relative, absolute) с z-index, отличным от auto;
• position: fixed и sticky: всегда, даже без z-index;
• элементы внутри flex и grid-контейнеров с z-index, отличным от auto, даже без position;
• визуальные эффекты: opacity меньше 1, transform, filter, backdrop-filter, perspective, clip-path, mask, mix-blend-mode кроме normal;
• will-change с одним из этих свойств, contain: paint, container-type: size или inline-size;
• isolation: isolate: свойство, которое создаёт контекст без побочных эффектов.

Внутри контекста порядок такой: фон и рамка корня, дети с отрицательным z-index, обычные блоки, float, строчное содержимое, позиционированные с auto или 0, затем положительные z-index.

Отдельно стоит top layer: <dialog>, открытый через showModal(), и элементы с popover рисуются поверх страницы независимо от контекстов. Для модалок это часто проще портала.

Где спотыкаются

Думают, что z-index работает на любом элементе. У статичного блока вне flex и grid он игнорируется.

Не замечают контекст, который создала анимация. Добавили transform для плавного появления или will-change: transform ради производительности, и меню внутри вдруг прячется под соседним блоком.

Путают наложение с обрезкой. Если меню режется по краю, виноват overflow: hidden у предка, и z-index тут бессилен: нужен портал через createPortal или top layer.