Модалка с огромным z-index оказалась под шапкой сайта
Модальное окно рендерится внутри карточки товара:
.card { transform: translateZ(0); }
.modal {
position: fixed;
inset: 0;
z-index: 9999;
}
.header {
position: sticky;
z-index: 10;
}
Окно открывается, но шапка сайта рисуется поверх него, а растяжка по всем сторонам растягивает окно по карточке, а не по экрану. Увеличение z-index до 999999 ничего не меняет.
В чём причина?
- Браузер отбрасывает значения z-index больше тысячи и приводит их к максимальному допустимому, поэтому дальнейшее увеличение бесполезно.
- Карточка с преобразованием создала свой контекст наложения и стала опорным блоком для фиксированных потомков — оверлей надо выносить порталом.
- Фиксированное позиционирование игнорирует z-index и всегда рисуется ниже липких элементов — нужно заменить его на абсолютное.
- Дело в липкой шапке: липкие элементы всегда рисуются поверх фиксированных, поэтому модалку нужно переводить на липкое позиционирование с большим z-index.