Контекст наложения
Вопрос
Почему z-index иногда не работает?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
z-index действует только на позиционированные элементы и flex/grid-детей
элемент сравнивается только внутри своего контекста наложения
новый контекст создают transform, opacity меньше 1, filter, will-change
position: fixed и sticky тоже создают контекст
ребёнок не может вылезти выше соседа родителя, даже с огромным z-index
лечение: поднимать родителя или выносить в портал
Что могут спросить следом
- Почему модалки рендерят через портал
- Как отладить проблему с z-index
- Что делает isolation: isolate
Разбор
z-index работает только на позиционированных элементах (и на детях flex/grid)
и сравнивает элементы внутри одного контекста наложения.
Контекст создаёт не только position с z-index, но и transform, opacity меньше
единицы, filter, will-change, isolation: isolate, position: fixed. Отсюда самый
частый случай: у родителя стоит transform: translateZ(0) ради плавности - и выпадающий
список внутри него больше не может подняться над соседним блоком, какой бы z-index
ни поставили.
Лечение: либо поднимать сам родитель, либо выносить всплывающий элемент в портал в конец
body, где он вне проблемного контекста. Именно так устроены модалки и тултипы
в библиотеках.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.