Css 如何在角材质中获取此模板？

我正在尝试在我的Angular应用程序中获取此模板样式：

----------------------------------------------------
               FIXED HEADER
----------------------------------------------------
  S   |
  I   |
  D   |
  E   |
  N   |           MAIN SCROLLABLE AREA
  A   |
  V   |
      |
      |
      |

在此模板中，标题在顶部始终可见（固定），主区域可独立于sidenav滚动

我知道我必须使用哪些角度组件，但我不知道应用什么css样式来获得所需的结果

我尝试了以下方法：

.fixedHeader {
    position: fixed;
    top: 0;
    z-index: 2;
}

有了这个CSS，我在固定的标题中获得了所需的结果，但是其余的内容被标题重叠了。如果我在sidenav和main区域应用边距顶部，我可以修复这个重叠，但可以使用边距顶部px 这似乎不是正确的做法

应用程序代码：

在app.component.html中，我使用两个自定义组件：

<mt-toolbar></mt-toolbar>
<mt-sidenav></mt-sidenav>

mt sidenav组件：

html

<mat-sidenav-container>
    <mat-sidenav mode="side" opened disableClose>
        <mat-nav-list>
          SIDENAV ITEMS
        </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
         ## MAIN SCROLLABLE AREA ##
    </mat-sidenav-content>
</mat-sidenav-container>

侧导航项目
##主可滚动区域##

当窗口宽度>=600px或56px时，必须将mat工具栏置于mat sidenav容器（或mat抽屉容器）上方，并将设置为64px

该类不是必需的，它将始终位于可滚动内容之上，因此不需要

位置：fixed。要使mat-ELVATION-z4正常工作，您需要将其设置为
位置：相对和
z指数：1

观察我使用的窗口的宽度和它的可观察媒体服务。例如，您还可以覆盖mat工具栏的高度，使其始终具有64px的高度

这就是我实现它的地方

编辑：
这是一个关于堆栈的闪电战。
您必须将mat工具栏放置在mat sidenav容器（或mat抽屉容器）上方，当窗口宽度>=600px时，将设置为64px，否则设置为56px

该类不是必需的，它将始终位于可滚动内容之上，因此不需要
位置：fixed。要使mat-ELVATION-z4正常工作，您需要将其设置为
位置：相对和
z指数：1

观察我使用的窗口的宽度和它的可观察媒体服务。例如，您还可以覆盖mat工具栏的高度，使其始终具有64px的高度

这就是我实现它的地方

编辑：
这是一个关于堆栈的闪电战。
您应该添加更多代码。将应用程序按当前的状态提供给我们，我们将能够更快地看到问题。但是，将主要内容定位在固定标题下的标准方式是顶部边距（或者如果您愿意，顶部填充）。现在确定你期望的更好的方式。当然，您可以相对定位主要内容。可以根据工具栏的高度自动计算顶部边距，而无需“手动”指定。您应该添加更多代码。将应用程序按当前的状态提供给我们，我们将能够更快地看到问题。但是，将主要内容定位在固定标题下的标准方式是顶部边距（或者如果您愿意，顶部填充）。现在确定你期望的更好的方式。当然，您可以相对定位主要内容。可以根据工具栏的高度自动计算顶部边距，而无需“手动”指定。这解决了sidenav中的问题，但解决了sidenav内容（主要区域）中的问题。由于删除了工具栏中的“位置：固定”，这个主要区域向上推动了滚动工具栏。它不应该这样做，对我来说它是这样工作的。工具栏贴在可滚动内容的上方，侧导航夹在其下方。只有中间的内容是可滚动的。请您提供更多的代码好吗？我知道在您的示例中，您没有使用“”来放置主要内容。删除此选项可以解决滚动问题，但为什么？Idk，可能与其中的样式相关，但没有必要使用它，甚至没有任何输入或输出。这解决了sidenav中的问题，但没有解决sidenav内容（主区域）中的问题。由于删除了工具栏中的“位置：固定”，这个主要区域向上推动了滚动工具栏。它不应该这样做，对我来说它是这样工作的。工具栏贴在可滚动内容的上方，侧导航夹在其下方。只有中间的内容是可滚动的。请您提供更多的代码好吗？我知道在您的示例中，您没有使用“”来放置主要内容。删除它可以解决滚动问题，但为什么呢？Idk，可能与其中的样式有关，但不必使用它，甚至没有任何输入或输出。
.fixedHeader {
    position: fixed;
    top: 0;
    z-index: 2;
 }

<mat-sidenav-container>
    <mat-sidenav mode="side" opened disableClose>
        <mat-nav-list>
          SIDENAV ITEMS
        </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
         ## MAIN SCROLLABLE AREA ##
    </mat-sidenav-content>
</mat-sidenav-container>