实现了一个固定的标题，但内容在标题上滚动答案

【问题标题】：Implemented a fixed header but the content is scrolling over the header实现了一个固定的标题，但内容在标题上滚动
【发布时间】：2019-03-29 16:40:16
【问题描述】：

我正在使用 Angular 材料和 Angular flex 布局使用 Angular 2 应用程序。我在我的应用程序中创建了 登录表单 和标题，仅在登录后可见在我的主页上。

在我的 app.component.html 中，我添加了标题并应用了以下样式以在滚动时对其进行修复。

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

在我的主页中，我添加了 mat-toolbar 组件、mat-card 组件和 mat-sidenav 组件。

登录应用程序后，当我滚动主页内容时，我的固定标题与我的固定标题重叠，并且我的标题被主页内容覆盖。

请访问我的示例应用here

任何人都可以帮助我正确实施我的固定标头吗？

【问题讨论】：

链接失效
尝试设置位置：相对；到你的内容的包装
@Luckyfella...不，它对我不起作用...它甚至滚动标题
Äh，抱歉：刚刚看到您的标题需要位置：已修复；不粘。然后它应该工作
@Luckyfella...不...现在我的标题在我的主页中不可见

标签： angular angular-material angular-flex-layout

【解决方案1】：

将 z-index 增加到以下值：

z-index: 998;

【讨论】：

【解决方案2】：

试试这样的

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;
}

对于有角度的材质，您需要将margin-top 放在mat-sidenav-content 选择器上。

Live demo

【讨论】：

滚动时内容与标题重叠。我猜只有当窗口 y 为 0 时，margin-top 才有帮助。