angular / material - 如何在页面内容上获得mat-toolbar阴影？

Question

我目前有一个标准的应用程序布局，工具栏带有固定的sidenav和内容部分。我已经发现我可以使用类包含mat-elevation-z4在工具栏上获得投影，但是当我在该部分中向下滚动时，我似乎无法使阴影覆盖内容部分。

我还尝试使用z-index来纠正这个......

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

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

Answer 1

问题在于z-index。工具栏被影响工具栏框阴影的内容部分所掩盖。为了保持框阴影可见，您需要为工具栏（您已经做过）提供更高的z-index。但是Z-index适用于定位元素，因此为.mat-toolbar提供了位置。

示例：

.mat-toolbar {
  position: relative;
}

Answer 2

为该元素提供一些定位

 position: relative; or     position: absolute;

这对我有用

.mat-toolbar.mat-primary {
    background: #3f51b5;
    color: #fff;
    position: relative;
}

Answer 3

预定义的CSS类

向元素添加海拔高度的最简单方法是简单地添加预定义CSS类之一mat-elevation-z＃，其中＃是您想要的海拔高度数字，0-24。动态高程可以通过切换高程类来实现：

<div [class.mat-elevation-z2]="!isActive" [class.mat-elevation-z8]="isActive"></div>

Answer 4

将style="position: relative"添加到工具栏。

Answer 5

我必须执行两个建议的解决方案（Rahul 和 K K）才能使其发挥作用：

1. 我在 mat-toolbar 中添加了一个 position: relative 和一个 z-index，因此阴影将覆盖工具栏下方的内容：

.mat-toolbar {
    position: relative;

    z-index: 5;
}

2. 我在工具栏中添加了“阴影”类之一的高度：

<mat-toolbar class="mat-elevation-z8" color="primary">
...
</mat-toolbar>