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

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

enter image description here

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

enter image description here

cssangularsassangular-material


Solution 1:[1]

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

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

Solution 2:[2]

you can try with override this css class

style.css/style.scss

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

Solution 3:[3]

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

styles.scss

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

Solution 4:[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

Solution 5:[5]

can't you just put the <notifications> element on top?

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

Solution 6:[6]

Try to put this in your base/root css file, if you don't have one, try adding tags in your index.html file and add this css over there. 

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

Solution 7:[7]

This worked for me:

::ng-deep .cdk-overlay-container {
  z-index: 10000 !important;
}

PS: A minor change to MSXman's answer

Solution 8:[8]

I have a problem because while using MatSnackBar and MatDialog since MatSnackBar was always overlaid by dialog. With this solution, I got MatSnackBar with a higher z-index: https://github.com/angular/components/issues/7471#issuecomment-340856500

Solution 9:[9]

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

For Any Angular Version | you can use this, btw you can increase the size until it gets appeared on top of every elements(I mean your components).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MSXman
Solution 2 Krishna Rathore
Solution 3 Daniel Tseng
Solution 4 Marcus
Solution 5 dK-
Solution 6 Dima Shivrin
Solution 7 noam aghai
Solution 8 Rochadsouza
Solution 9 Sujeewa K. Abeysinghe

Related Questions