问题
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?
回答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
回答2:
Increase your z-index to the following:
z-index: 998;
来源:https://stackoverflow.com/questions/49856481/implemented-a-fixed-header-but-the-content-is-scrolling-over-the-header