Question

我正在使用角度材质和角度柔化布局处理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

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

Answer 1

尝试这样的事情

<强> 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

Answer 2

将z-index增大到以下值：

z-index: 998;

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

2 个答案: