Question

所以我在玩Angular，我想在我的应用程序出现错误时向我的应用程序添加重要的小吃栏。

因此，我有一个主页，导航是z索引为3000的覆盖图。在导航中，可以选择登录（请参见下图）。我故意输入错误的登录数据来触发错误处理程序并显示便条。

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

* {
z-index: 10000;
}

和

::root {
z-index: 10000;
}

但是没有一个起作用。有谁知道该怎么做？

App.component.ts：用户导航是我处理登录的位置。通知包含点心栏的逻辑

<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

您可以尝试覆盖此CSS类

style.css / style.scss

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

Answer 2

（角度8）将其放在style.css上对我来说效果很好：

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

Answer 3

这对我有用：

import numpy as np
if np.isnan(your_array).any():
  print("There are NaN values, I need to remove")

PS：对MSXman答案的微小改动

Answer 4

（角度9），我添加了以下CSS代码以对其进行修复。

styles.scss

.cdk-overlay-container {
    z-index: 99999999999999; 
}

Answer 5

您不能只是将<notifications>元素放在顶部吗？

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

Answer 6

请尝试将其放在基本/根css文件中，如果没有，请尝试在index.html文件中添加标签，然后在该文件中添加此css。

 :host /deep/ .cdk-overlay-pane{
   z-index: 1000;
 }

Answer 7

我有同样的问题。我决定减少页脚元素的z索引，而不是增加零食。

问候 M

Answer 8

我有一个问题，因为在使用 MatSnackBar 和 MatDialog 时，因为 MatSnackBar 总是被对话框覆盖。通过这个解决方案，我得到了具有更高 z-index 的 MatSnackBar：https://github.com/angular/components/issues/7471#issuecomment-340856500

角材料：小吃栏隐藏在具有高z索引的组件后面

8 个答案: