Angular2 + Material: mat-toolbar casts no shadow over mat-sidenav-container despite mat-elevation-z*

had the exact same issue. I resolved it by adding the following class in my CSS:

.sidenav-container {
  z-index: -1 !important;
}

and added it to the mat-sidenav-container

<mat-sidenav-container class="sidenav-container">
...
</mat-sidenav-container>

Add this in your styles:

.mat-toolbar {
  position: relative;
  z-index: 2;
}

I solved the problem as follows:

CSS:

.tbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

Then in my template:

HTML:
<mat-toolbar class="mat-elevation-z6 tbar">
  ...
</mat-toolbar>

Related