Модалка поверх всего
Условие
.overlay затемняет всю область просмотра, .modal стоит по центру поверх затемнения и не растягивается на всю ширину. Прокрутка страницы под затемнением не важна.
Что проверяют тесты
затемнение на всю область
полупрозрачный фон
окно по центру
окно не растянуто
поверх содержимого
Как подойти
inset: 0 - короткая запись для top/right/bottom/left, растягивающая фиксированный элемент на весь экран. Флекс на затемнении центрирует окно без знания его размеров. Фиксированное позиционирование ломается, если у предка есть transform - тогда элемент позиционируется относительно него, а не окна; поэтому настоящие модалки выносят порталом в body. Что добавить вслух: блокировка прокрутки, ловушка фокуса, aria-modal.
Подсказки: 3
- fixed плюс inset: 0 растягивает элемент на всю область просмотра одной строкой.
- Центрирование содержимого - те же два флекс-свойства.
- Ширина окна не должна наследоваться от растянутого родителя.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.