Angular Material cdk-container и фиксированный заголовок основного сайта, переопределение z-index

У меня есть сайт с fixed header в угловом материале с z-index из 1100.

Хотя у меня есть несколько mat-menu на моем сайте, которые перекрывают заголовок с z-index:1200 и имеют класс cdk-overlay-container (класс угловой материальной части), который является поведением по умолчанию.

Чтобы переопределить это, я просто уменьшаю cdk-overlay-container z-index до 1000, чтобы он отставал от fixed header, и у меня все в порядке.

Проблема

Но когда я открываю свой диалог материалов, который использует тот же cdk-overlay-container и тот же z-index, он показывает мой фиксированный заголовок над этим наложением из-за его высокого z-index, поэтому любая идея, как достичь вышеуказанного сценария, добавляя разные class к cdk-overlay-container так, чтобы мой mat-menu находился за fixed header но мой mat-dialog превыше всего содержания.

Снимки экрана

Обычный сценарий https://www.screencast.com/t/XhB2szH3gZe

Сценарий проблемы https://www.screencast.com/t/fYrMYFEOd

У меня есть одно решение с помощью машинописного сценария (которое, когда диалоговое окно показывает более низкий z-индекс заголовка), но мне нужно какое-то чистое решение CSS.

Спасибо!


angular css angular-material-5
person Awais    schedule 15.10.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я понял это сам

Просто переопределите z-index из cdk-overlay-container

В вашем style.scss

.cdk-overlay-container{
  z-index:999; //lower then fixed header z-index so it goes behind it
}

и в вашем компоненте dialog.scss

.cdk-overlay-container{
   z-index:2000 !important; //higher then fixed header z-index so it comes above
}

Ваше здоровье!

person Awais    schedule 16.10.2019

arrow_upward
1
arrow_downward

У меня была аналогичная проблема с полноэкранным оверлейным контейнером CDK и диалоговым окном материала, которое должно быть выше всего. Проблема в том, что если вы используете предоставленные элементы материала, такие как диалоговое окно, всплывающая подсказка, меню, все они работают с оверлейным CDK. Кроме того, у вас может быть собственный сервис Overlay, который использует CDK. В моем случае были созданы два div cdk-container-overlay. z-index по умолчанию равен 1000, а последний экземпляр перекрывается, когда оба наложения требуются одновременно.

Некоторые будут кричать, что это не Angular, но в моем случае я добавил backdropClass в конфигурацию диалога материалов. Затем я просто выбираю родительский узел диалогового фона и вручную добавляю z-index по требованию.

public openFeedbackDialog(): void {
    this.dialog.open(FeedbackFormComponent, {
        width: '450px',
        maxHeight: '450px',
        minHeight: '200px',
        backdropClass: 'feedbackBackdrop',
        hasBackdrop: true
    })
    window.document.querySelector<any>('.feedbackBackdrop').parentNode.style.zIndex = "1001"
}

введите здесь описание изображения

person igsm    schedule 12.11.2020
comment
Ах, хороший подход, я попробую это в будущем и дам вам знать, если вам понадобится какая-либо помощь, в настоящее время плохо добавленное выше исправление в моем проекте, и оно работает нормально :) ... В любом случае спасибо за это усилие. Ваше здоровье! - person Awais; 12.11.2020