How to stop content scrolling over mat-tabs, when tabs are fixed

Question

I need mat-tabs to stick to the top, I went through this Stackoverflow anwser , and fixed the tabs on top by adding this to the css:

:host ::ng-deep .mat-tab-header {
   position: fixed;
}

This works for fixing the tabs but, now the content flows over the tabs. Is there a way to fix this?

Stackblitz link for the problem . Please let me know if there is another way to stick the tabs on top or make the content not scroll on to the tabs.

Thank you.

Answer 1

You can just add background color + z-index: 1111 if I understood your question correctly.

:host ::ng-deep .mat-tab-header {
   position: fixed;
   background: white;
   z-index: 1111;
}