Implemented a fixed header but the content is scro

Question

I am working with Angular 2 app using angular material and angular flex layout.I have created in my application a login form and a header which is only visible after login in my home page.

In my app.component.html I have added my header and applied the below style to get it fixed while scrolling.

<div style="margin-bottom:5px;
   top: 0;
    position: sticky;
    z-index: 1;
    background-color: inherit;">

In my home page I have added a mat-toolbar component,mat-card component and mat-sidenav component.

After logging in the app, when I scroll the homepage content is overlapping my fixed header and my header is getting covered with the home page content.

Please access my sample app here

Can anybody please help me in proper implementation of my fixed header?

Answer 1

Try something like this

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <header>Fixed header</header>
    <main> 
      <div *ngFor="let item of items"> Content </div>
    </main>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  items = new Array(100)
}

app.component.css

header {
  position: fixed;
  top: 0;
  left: 0;
  height: 56px;
  width: 100%;
  background-color: tomato;
}

main {
  margin-top: 56px;
  background-color: aliceblue;
}

With angular material you need to put margin-top on the mat-sidenav-content selector.

Live demo

Answer 2

Increase your z-index to the following:

z-index: 998;