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

這將解決您的問題！