angular/material - how to get mat-toolbar shadow over the page content?

Question

I currently have a standard layout for my app, toolbar with a fixed sidenav and content section. I have since discovered that I can get the drop shadow on the toolbar with the class inclusion mat-elevation-z4, however I cannot seem to get the shadow to overlay the content section when I have scrolled down in the section itself.

I have also attempted to use the z-index to correct this...

mat-toolbar I gave z-index: 2 and <div class="container"> I gave z-index: -1

If somebody could give me some advice, I would be grateful.

Answer 1

The issue is because of the z-index. The toolbar is overshadowed by the content section which affects the box-shadow of toolbar. In order to keep the box-shadow visible, you need to give a higher z-index to toolbar (which you already did). But Z-index works on positioned elements, hence provide position to the .mat-toolbar.

Example:

.mat-toolbar {
  position: relative;
}

Answer 2

Predefined CSS classes

The easiest way to add elevation to an element is to simply add one of the predefined CSS classes mat-elevation-z# where # is the elevation number you want, 0-24. Dynamic elevation can be achieved by switching elevation classes:

<div [class.mat-elevation-z2]="!isActive" [class.mat-elevation-z8]="isActive"></div>