角度/材料 - 如何在頁面內容上獲得 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>