Angular 材质：snackbar 隐藏在具有高 z-index 的组件后面

Question

所以我在玩 Angular 一点，我想在我的应用程序中出现错误时向我的应用程序添加材料小吃店。

所以，我有我的主页，我的导航是一个 z-index 为 3000 的叠加层。在导航中有登录选项（见下图）。我故意输入了错误的登录数据以触发错误处理程序并使快餐栏出现。

小吃店确实出现了。但是，它隐藏在导航后面。如何让它显示在导航上方？我尝试将 10000 的 z-index 添加到使用以下代码处理小吃店的组件的 scss 中：

* {
z-index: 10000;
}

和

::root {
z-index: 10000;
}

但没有一个奏效。有谁知道如何做到这一点？

App.component.ts: user-navigation 是我处理登录的地方。 Notifications 包含了snackbar 的逻辑

<navigation></navigation>
<user-navigation>

</user-navigation>
<router-outlet></router-outlet>
<notifications></notifications>

Notifications.component.ts ，这有效，它打开小吃栏，但它隐藏在用户导航后面

import { Component, OnInit } from '@angular/core';
import {MatSnackBar} from '@angular/material';
import {NotificationService} from '../services/notification.service';

@Component({
  selector: 'notifications',
  templateUrl: './notifications.component.html',
  styleUrls: ['./notifications.component.css']
})
export class NotificationsComponent implements OnInit {

  constructor(public snackBar: MatSnackBar, private notificationService: NotificationService) { }

  ngOnInit() {
    this.notificationService.notification$
        .subscribe((message) => {
          console.log('received the notification', message);
          this.openSnackBar(message);
        });
  }

  openSnackBar(message: string, action?: string) {
    setTimeout(() => {
      this.snackBar.open(message, action, {
        duration: 20000
      });
    }, 0);
  }
}

这是登录页面。主页在这后面并且不可见，因为我给导航提供了高 z-index

这是我关闭导航时的主页。小吃栏是可见的，但我希望在导航打开的情况下也能看到它

Answer 1

(Angular 8) 把它放在 style.css 上对我来说效果很好：

.cdk-overlay-container {
    position: fixed;
    z-index: 10000;
}

Answer 2

你可以尝试覆盖这个CSS类

样式.css/样式.scss

.cdk-overlay-pane{
  z-index: 10000 !important;
}