Angular2 + 材质：尽管 mat-elevation-z*，mat-toolbar 不会在 mat-sidenav-container 上投射阴影*答案

【问题标题】：Angular2 + Material: mat-toolbar casts no shadow over mat-sidenav-container despite mat-elevation-z*Angular2 + 材质：尽管 mat-elevation-z*，mat-toolbar 不会在 mat-sidenav-container 上投射阴影*
【发布时间】：2018-03-20 17:55:24
【问题描述】：

试图模仿 Material guide 的外观，我无法在 mat-sidenav-container 元素上渲染工具栏的阴影：

页面显示工具栏和sidenav，但阴影不可见：

单独显示工具栏的页面，渲染阴影：

查看 HTML 代码，再简单不过了。我错过了什么？谢谢...

app.component.html

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

<mat-sidenav-container >

  <!-- Side menu -->
  <mat-sidenav mode="side" opened="true">

    <h3>Menu 1</h3>
    <ul>

      <!-- Home (aka dashboard) -->
      <li>
        <a routerLink="/">dashboard</a>
      </li>

      <!-- Home (aka dashboard) -->
      <li>
        <a routerLink="/resolutions">resolutions</a>
      </li>
    </ul>

    <!-- List resolutions -->
    <h3>Menu 2</h3>
    <ul>
      <li>
        <a>incentive</a>
      </li>
    </ul>

  </mat-sidenav>

  <!-- Routed contents -->
  <div class="contents">
    <router-outlet></router-outlet>
  </div>

</mat-sidenav-container>

【问题讨论】：

标签： angular angular-material material-design

【解决方案1】：

在你的样式中添加这个：

.mat-toolbar {
  position: relative;
  z-index: 2;
}

【讨论】：

只有在 2020 年对我来说没有奇怪副作用的有效答案
引用@Spikolynn 的回复！工作无副作用。
可以说，这是2021年的解决方案。感谢@alex-nepsha

【解决方案2】：

有完全相同的问题。我通过在我的 CSS 中添加以下类来解决它：

.sidenav-container {
  z-index: -1 !important;
}

并将其添加到 mat-sidenav-container

<mat-sidenav-container class="sidenav-container">
...
</mat-sidenav-container>

【讨论】：

负 z-index 做得很好。只要工具栏也具有 z-index 属性，就修复了我的情况。谢谢！
在我的例子中，为 z-index 设置 -1 会停用所有可能的用户与内容的交互。 sidenav 中的按钮不再可点击。你有同样的问题吗？
好的，可以通过在工具栏上应用一个非常大的 z-index 而不是 sidenav-container 来修复它
@JacquesBourque 你是怎么解决的？我有同样的问题。
@yuro 我已将工具栏的 z-index 设置为 9999。但我删除了它，因为它引起了其他问题（如果我没记错的话......已经有一段时间了:)）

【解决方案3】：

我解决的问题如下：

CSS:

.tbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

然后在我的模板中：

HTML:
<mat-toolbar class="mat-elevation-z6 tbar">
  ...
</mat-toolbar>

【讨论】：

【解决方案4】：

如果更改 z-index 不起作用，请添加以下类：

<mat-toolbar class="mat-elevation-z2"></mat-toolbar>

根据角度指南：(https://material.angular.io/guide/elevation)

【讨论】：

【解决方案5】：

你也可以试试这个：

.sidenav-container {
  position:fixed;
  width:100%;
  z-index:-1;
}

【讨论】：

【解决方案6】：

无法测试，但是。我有一个类似的声音问题，卡片看起来没有提升。我只需要把它们从最左边的地方垫出来。

<mat-sidenav mode="side" opened="true" style="margin: 10px;">

【讨论】：

【解决方案7】：

我认为改变 z-index 并不是最优的。更好的解决方案是向 sidenav 组件添加透明背景。

mat-sidenav-container {
   background: transparent;
   
   mat-sidenav {
      background: transparent; // that one is also necessary if you have mode="side" on your mat-sidenav element
   }
}

像魅力一样为我工作。

【讨论】：

【解决方案8】：

检查你是否有一个类.mat-drawer-container（你需要在你的CSS文件中搜索，因为如果你定义了一个背景，这个层会超载你的影子导航栏）

您需要将.mat-drawer-container背景设置为“无”

.mat-drawer-container {
  background: none !important;
}

这将解决您的问题！

【讨论】：