Angular Material 2 - How to lock mat-toolbar and mat-tabs to the top

Did you mean a sticky toolbar?

Just add a class to the toolbar and make it sticky (using the position attribute set to sticky):

.app-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; /* Sets the sticky toolbar to be on top */
    z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */
}

---

Note: There is no support for position: sticky on IE 11. For more info on browser support for position: sticky, view this caniuse page.

Even i was facing the same issue for my project. It is very diffiucult to make the toolbar fixed when it's declared inside <mat-sidenav-container>.

The reason why it's difficult is because both <mat-sidenav-container> and <mat-toolbar> uses transform: translate3d(0,0,0).

So the best way to proceed would be, to remove <mat-toolbar> from <mat-sidenav-container> and write an extenal css for the toolbar.

mat-toolbar {
    height: 64px;
    position: fixed;
    z-index: 100;
    width: 100%  !important;
}

This solution worked for me.

You can probably achieve it by setting the style with ::ng-deep:

::ng-deep .mat-toolbar{
  z-index: 998;
  position: fixed
}
::ng-deep .mat-tab-group{
  margin-top:55px !important;
}

::ng-deep .mat-tab-header{
      z-index: 999;
      width:100vw;
      position: fixed  !important;
      background-color: red !important;
}
::ng-deep .mat-tab-body-wrapper{
    position: relative !important;
    margin-top:55px;
}

DEMO