Angular material: snackbar is hidden behind component with high z-index

Question

So I'm playing around with Angular a bit and I wanted to add material snackbar to my app for when there's an error in my app.

So, I have my hompage and my navigation is an overlay with a z-index of 3000. In the navigation there's the option to log in ( see picture below ). I entered bad log in data on purpose to trigger the error handler and make the snackbar appear.

The snackbar does appear. However, it is hidden behind the navigation. How can I make it show above the navigation? I tried adding a z-index of 10000 to the scss of the component that handles the snackbar with the following code:

* {
z-index: 10000;
}

and

::root {
z-index: 10000;
}

But none worked. Does anyone know how to do this?

App.component.ts: user-navigation is where I handle the log in. Notifications contains the logic for the snackbar

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

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

Notifications.component.ts , this works, it opens the snackbar, but it is hidden behind the user navigation

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);
  }
}

This is the login page. The home page is behind this and not visible because of the high z-index I gave to the navigation

This is the homepage when I close the navigation. The snackbar is visible, but I want to be able to also see it with the navigation open

Answer 1

(Angular 8) Putting this on style.css worked fine for me:

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

Answer 2

you can try with override this css class

style.css/style.scss

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

Answer 3

(Angular 9) I add the following css code to fix it.

styles.scss

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

Answer 4

I had the same issue. I decided to reduce the z-index of the footer element instead of increase the snack one.

Regards M