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.

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

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.