Angular Material cdk-контейнер и переопределение z-индекса фиксированного заголовка основного сайта ⇐ CSS
-
Anonymous
Angular Material cdk-контейнер и переопределение z-индекса фиксированного заголовка основного сайта
У меня есть сайт с фиксированным заголовком в угловом материале с z-index, равным 1100.
Хотя на моем сайте есть mat-menu, которые перекрывают заголовок с z-index:1200 и имеют класс cdk-overlay-container (класс углового материала), который является поведением по умолчанию.
Чтобы переопределить это, я просто уменьшаю cdk-overlay-container z-index до 1000, чтобы он находился за исправлен заголовок и все в порядке.
Проблема
Но когда я открываю диалоговое окно материала, которое использует тот же cdk-overlay-container и тот же z-index, он показывает мой фиксированный заголовок над этим наложением из-за его высокого code>z-index. Итак, есть идеи, как реализовать описанный выше сценарий, добавив другой class в cdk-overlay-container, чтобы мой mat -menu находится за фиксированным заголовком, но мой mat-dialog находится над всем содержимым.
Снимки экрана
Обычный сценарий https://www.screencast.com/t/XhB2szH3gZe
Сценарий проблемы https://www.screencast.com/t/fYrMYFEOd
У меня есть одно решение с помощью type-script (когда диалоговое окно показывает понижение z-индекса заголовка), но мне нужно какое-то чистое решение CSS.
Спасибо!
У меня есть сайт с фиксированным заголовком в угловом материале с z-index, равным 1100.
Хотя на моем сайте есть mat-menu, которые перекрывают заголовок с z-index:1200 и имеют класс cdk-overlay-container (класс углового материала), который является поведением по умолчанию.
Чтобы переопределить это, я просто уменьшаю cdk-overlay-container z-index до 1000, чтобы он находился за исправлен заголовок и все в порядке.
Проблема
Но когда я открываю диалоговое окно материала, которое использует тот же cdk-overlay-container и тот же z-index, он показывает мой фиксированный заголовок над этим наложением из-за его высокого code>z-index. Итак, есть идеи, как реализовать описанный выше сценарий, добавив другой class в cdk-overlay-container, чтобы мой mat -menu находится за фиксированным заголовком, но мой mat-dialog находится над всем содержимым.
Снимки экрана
Обычный сценарий https://www.screencast.com/t/XhB2szH3gZe
Сценарий проблемы https://www.screencast.com/t/fYrMYFEOd
У меня есть одно решение с помощью type-script (когда диалоговое окно показывает понижение z-индекса заголовка), но мне нужно какое-то чистое решение CSS.
Спасибо!
