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>

Answer 3

Provide some positioning for that element

 position: relative; or     position: absolute;

this is worked for me

.mat-toolbar.mat-primary {
    background: #3f51b5;
    color: #fff;
    position: relative;
}

Answer 4

将style="position: relative"到工具栏。

Answer 5

I had to do both of the suggested solutions (Rahul's and K K's) in order to make it work:

1. I added to the mat-toolbar a position: relative and a z-index so the shadow will override the content below the toolbar:

.mat-toolbar {
    position: relative;

    z-index: 5;
}

2. I added elevation to the toolbar one of the "shadow" classes:

<mat-toolbar class="mat-elevation-z8" color="primary">
...
</mat-toolbar>