角度/材质-如何在页面内容上获得工具栏阴影？

Question

目前，我的应用程序具有标准布局，工具栏具有固定的sidenav和内容部分。从那以后，我发现可以使用包含类在工具栏上添加阴影mat-elevation-z4，但是当我向下滚动内容部分时，似乎看不到阴影可以覆盖内容部分。

我还尝试使用z-index来更正此问题...

mat-toolbar我给了z-index: 2，<div class="container">我给了z-index: -1

如果有人能给我一些建议，我将不胜感激。

Answer 1

问题是由于z-index。工具栏被内容部分遮盖，这会影响工具栏的框阴影。为了使盒子阴影保持可见，您需要为工具栏赋予更高的z索引（您已经这样做了）。但是Z索引适用于定位的元素，因此可以为.mat-toolbar提供位置。

例：

.mat-toolbar {
  position: relative;
}