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

问题描述

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

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

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

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

请访问我的示例应用 这里

有人可以帮我正确实现我的固定标头吗?

解决方案

将 z-index 增加到以下内容:

z-index: 998;

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.

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

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?

解决方案

Increase your z-index to the following:

z-index: 998;

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