Angular2 + Material：尽管 mat-elevation-z*，mat-toolbar 不会在 mat-sidenav-container 上投下阴影

Question

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

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

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

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

应用程序组件.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>

Answer 1

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

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

并将其添加到 mat-sidenav-container

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

Answer 2

将此添加到您的样式中：

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

Answer 3

我解决了这个问题如下：

CSS:

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

然后在我的模板中：

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

Answer 4

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

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

Answer 5

你也可以试试这个：

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

Answer 6

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

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

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

Answer 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
   }
}

像魅力一样为我工作。

Answer 8

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

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

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

这将解决您的问题！