实现了固定标头但内容在 Headers 上滚动-Java 学习之路

我正在使用Angular 2应用程序使用角度材质和角度flex布局 . 我在我的应用程序中创建了一个 login form 和 a header ，只有在我的主页登录后才能看到它 .

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

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

在我的主页中，我添加了一个 mat-toolbar 组件， mat-card 组件和 mat-sidenav 组件 .

登录应用程序后，当我滚动主页内容与我的固定 Headers 重叠时，我的 Headers 将覆盖主页内容 .

请访问我的示例应用here

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

2 回答

0
将z-index增加到以下值：
```
z-index: 998;
```
回复于 2024-04-20T10:49:23+08:00

尝试这样的事情

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

回复于 2024-04-20T10:49:23+08:00

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

2 回答

相关问题