角度/材料 - 如何在页面内容上获得垫子工具栏阴影？答案

【问题标题】：angular/material - how to get mat-toolbar shadow over the page content?角度/材料 - 如何在页面内容上获得垫子工具栏阴影？
【发布时间】：2018-07-22 10:06:03
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css angular

【解决方案1】：

为该元素提供一些定位

 position: relative; or     position: absolute;

这对我有用

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

【讨论】：

【解决方案2】：

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

例子：

.mat-toolbar {
  position: relative;
}

【讨论】：

感谢您的解释。现在更有意义了。

【解决方案3】：

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

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review
为什么不是一个有效的答案？
在你的回答中要具体，就像在上一个链接中所说的那样，提供不需要提问者澄清的答案。阅读完当前版本后，我有疑问：这里的“sidenav”是什么？为什么添加此代码应该会有所帮助？检查这个问题的其他答案，他们努力给出明确的答案

【解决方案4】：

预定义的 CSS 类

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

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

【讨论】：

【解决方案5】：

我必须同时采用建议的两种解决方案（Rahul's 和 K K's）才能使其发挥作用：

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

.mat-toolbar {
    position: relative;

    z-index: 5;
}

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

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

【讨论】：