angular-material2 toolbar shadow

Question

I am new to material2 I am trying to keep the the main app toolbar fixed on the top of the screen the problem is that the elevation is not working correctly (the content hides the drop shadow of the toolbar) I Here is my HTML code

.app-content {
  height: calc(100% - 64px);
  overflow: auto;
}

<md-toolbar class="mat-elevation-z5" color="primary" style="z-index: 100!important;">

  <button md-icon-button (click)="start.open()">
      <md-icon class="demo-toolbar-icon">menu</md-icon>
    </button>
  <span>E-Learning</span>

  <span class="demo-fill-remaining"></span>
</md-toolbar>
<div class="app-content" style="z-index: 0!important;">
  <div class="workspace">
    <el-teacher></el-teacher>
  </div>
</div>

Answer 1

You have to provided position relative/absolute/fixed/static to your element to get z-index working.

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