实现了固定标题，但内容在标题上滚动

Question

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

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

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

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

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

请在此处访问我的示例应用程序

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

Answer 1

尝试这样的事情

应用程序组件.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)
}

应用程序组件.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器。

现场演示