Angular Material cdk-container 和主站点已修复 header z-index 覆盖

Question

我在 angular material 中有 fixed header 的站点，在 1100 中有 z-index。

虽然我的站点中有一些 mat-menu 与 header 和 z-index:1200 重叠并且有 class cdk-overlay-container（angular 物资class) 这是默认行为。

为了覆盖它，我只是将 cdk-overlay-container z-index 减少到 1000 以便它落后于 fixed header 并且一切对我来说都很好。

问题

但是当我打开我的 material 对话框时，它使用相同的 cdk-overlay-container 和相同的 z-index 它显示我的固定 header 在该覆盖层之上，因为它的高 z-index，所以知道如何通过向 cdk-overlay-container 添加不同的 class 来实现上述场景，以便我的 mat-menu 落后于 fixed header 但我的 mat-dialog 在上面所有内容。

屏幕截图

正常情况 https://www.screencast.com/t/XhB2szH3gZe

问题场景 https://www.screencast.com/t/fYrMYFEOd

我有一个 type-script 的解决方案（当对话框显示 header 的 z-index 较低时）但我需要一些纯粹的 CSS 解决方案。

谢谢！

Answer 1

我自己想通了

只需覆盖 cdk-overlay-container

的 z-index

在你的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
}

干杯！

Answer 2

我对全屏 CDK 覆盖容器和 material 对话框也有类似的问题，它们应该高于任何东西。问题是，如果您使用提供的 material 元素，例如对话框、工具提示、菜单，它们都可以与覆盖 CDK 一起使用。然后，最重要的是，您可能拥有使用 CDK 的自定义覆盖服务。在我的例子中，创建了两个 cdk-container-overlay div。 z-index 默认为 1000，当同时需要两个覆盖时，最新的实例重叠。

有些人会大喊这不是 Angular 方式，但就我而言，我最终在 material 对话框的配置中添加了一个 backdropClass。然后，我只是 select 对话框背景的 parentNode 并根据需要手动添加 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 3

您可以使用自定义 OverlayContainer class 来解决问题。您可以找到实施示例 here.

Angular Material cdk-container 和主站点已修复 header z-index 覆盖

Angular Material cdk-container and main site fixed header z-index override

css

angular

angular-material-5