实现了固定的标头，但是内容在标头上滚动 [英] Implemented a fixed header but the content is scrolling over the header

问题描述

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

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.

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

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

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

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?

推荐答案

将z-index增大到以下值:

Increase your z-index to the following:

z-index: 998;

这篇关于实现了固定的标头，但是内容在标头上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！