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>