我怎样才能让 Angular Material 按钮不在粘性栏上滚动

Question

我有一个 Angular 应用程序，其顶部有一个导航栏，它是粘性的（位置：粘性；顶部：0；）。在导航栏下，我有包含 Angular material 组件的内容，例如垫按钮或垫卡。问题是如果我滚动 angular material 组件滚动导航栏（出现在顶部）。我怎样才能避免这种情况？
我创建了一个显示问题的 stackblitz：https://stackblitz.com/edit/angular-fat76n?file=src/app/toolbar-overview-example.html

Answer 1

您必须为您的 .tool-bars class 指定 z-index。

.tool-bars {
  position: sticky;
  top: 0;
  z-index: 9999;
}

如果您不指定 z-index，浏览器将呈现稍后在 html 中定义的元素。通过指定 z-index，您可以控制应在 z 轴上绘制元素的位置。

9999 只是一个示例，对于粘性导航栏，您通常会选择较高的值以保证没有其他元素具有更高的 z-index。

我怎样才能让 Angular Material 按钮不在粘性栏上滚动

How can I make that Angular Material Buttons not scrolling over a sticky bar

css

angular-material

angular