Angular Material cdk-container 和主站点固定标头 z-index 覆盖

Question

我有一个带有fixed header角材料的z-index网站1100。

虽然mat-menu我的网站中有一些与标题重叠z-index:1200并具有类cdk-overlay-container（角度材料类），但这是默认行为。

为了覆盖这个，我只需减少 to ，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-index 时），但我需要一些纯 CSS 解决方案。

谢谢！

Answer 1

我对全屏 CDK 覆盖容器和应该位于任何内容之上的材质对话框也有类似的问题。问题是，如果您使用提供的材质元素（如对话框、工具提示、菜单），它们都可以与覆盖 CDK 一起使用。然后，最重要的是，您可以拥有利用 CDK 的自定义 Overlay 服务。就我而言，创建了两个 cdk-container-overlay div。z-index 默认情况下为 1000，当同时需要两个覆盖时，最新实例重叠。

有些人会大喊这不是 Angular 的方式，但就我而言，我最终在材质对话框的配置中添加了backgroundClass。然后，我只需选择对话框背景的父节点并根据需要手动添加 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"
}

Answer 2

我自己想通了

只需覆盖z-indexofcdk-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
}

干杯!