Angular Material cdk-контейнер и переопределение z-индекса фиксированного заголовка основного сайта ⇐ CSS

[Anonymous]

У меня есть сайт с фиксированным заголовком в угловом материале с 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.

Спасибо!