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

Question

For my Website I'm attempting to lock the < Mat-Toolbar > to the top of the screen and then directly under that I want to lock the < Mat-Tabs > .

The issue I'm running into is that position: fixed in CSS is not locking it at all, and when I actually go to the site and inspect element it's putting in a < div >

How am I supposed to lock these two elements to the top, how am I supposed to bypass this auto created Div? I had a previous question similar to this but I solved that using Fixed and Absolute positioning, which that does not apply in this newer version of Angular/ Angular Material.

Source Code for my Website

Answer 1

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.

Answer 2

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