角度/材料 - 如何在页面内容上获得 mat-toolbar 阴影？

Question

我目前有我的应用程序的标准布局，带有固定 sidenav 和内容部分的工具栏。 从那以后，我发现我可以通过包含mat-elevation-z4类在工具栏上获得阴影，但是当我向下滚动部分本身时，我似乎无法获得阴影覆盖内容部分。

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

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

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

Answer 1

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

示例：

.mat-toolbar {
  position: relative;
}

Answer 2

预定义的 CSS 类

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

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

Answer 3

为该元素提供一些定位

 position: relative; or     position: absolute;

这对我有用

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

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>