z-index не работает
Условие
.tooltip должен отображаться поверх .overlay. Сейчас не отображается, хотя z-index больше. Менять z-index у .tooltip нельзя - разберись, почему он не действует.
Что проверяют тесты
родитель не создаёт контекст наложения
z-index подсказки не тронут
перекрытие осталось позиционированным
Как подойти
Одна из самых частых причин «z-index не работает». Числовой z-index у позиционированного родителя создаёт контекст наложения, и девять тысяч у потомка сравниваются уже не с внешним миром, а с соседями внутри родителя - снаружи весь контекст ведёт себя как один слой со значением родителя. Лечение: убрать контекст у родителя либо поднять сам родитель. Контекст создают также opacity меньше единицы, transform, filter, will-change, isolation: isolate - последнее как раз для намеренного создания.
Подсказки: 3
- z-index сравнивается только внутри одного контекста наложения.
- Позиционированный элемент с числовым z-index создаёт свой контекст - и всё, что внутри, остаётся в нём.
- Прозрачность меньше единицы, transform и filter создают контекст тоже.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.