angular - 实现了一个固定的标题，但内容在标题上滚动

Question

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

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

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

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

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

请访问我的示例应用程序 here

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

Answer 1

将您的 z-index 增加到以下值:

z-index: 998;