[英]angular/material - how to get mat-toolbar shadow over the page content?
I currently have a standard layout for my app, toolbar with a fixed sidenav and content section.我目前有我的应用程序的标准布局,带有固定 sidenav 和内容部分的工具栏。 I have since discovered that I can get the drop shadow on the toolbar with the class inclusion
mat-elevation-z4
, however I cannot seem to get the shadow to overlay the content section when I have scrolled down in the section itself.从那以后,我发现我可以通过包含
mat-elevation-z4
类在工具栏上获得阴影,但是当我向下滚动部分本身时,我似乎无法获得阴影覆盖内容部分。
I have also attempted to use the z-index to correct this...我也尝试使用 z-index 来纠正这个......
mat-toolbar
I gave z-index: 2
and <div class="container">
I gave z-index: -1
mat-toolbar
我给了z-index: 2
和<div class="container">
我给了z-index: -1
If somebody could give me some advice, I would be grateful.如果有人能给我一些建议,我将不胜感激。
The issue is because of the z-index.问题是因为 z-index。 The toolbar is overshadowed by the content section which affects the box-shadow of toolbar.
工具栏被影响工具栏框阴影的内容部分所掩盖。 In order to keep the box-shadow visible, you need to give a higher z-index to toolbar (which you already did).
为了保持 box-shadow 可见,您需要为工具栏提供更高的 z-index(您已经这样做了)。 But Z-index works on positioned elements, hence provide position to the .mat-toolbar.
但是 Z-index 适用于定位元素,因此为 .mat-toolbar 提供位置。
Example:示例:
.mat-toolbar {
position: relative;
}
Predefined CSS classes预定义的 CSS 类
The easiest way to add elevation to an element is to simply add one of the predefined CSS classes mat-elevation-z# where # is the elevation number you want, 0-24.向元素添加高程的最简单方法是简单地添加预定义的 CSS 类 mat-elevation-z# 之一,其中 # 是您想要的高程编号,0-24。 Dynamic elevation can be achieved by switching elevation classes:
可以通过切换高程类来实现动态高程:
<div [class.mat-elevation-z2]="!isActive" [class.mat-elevation-z8]="isActive"></div>
Provide some positioning for that element为该元素提供一些定位
position: relative; or position: absolute;
this is worked for me这对我有用
.mat-toolbar.mat-primary {
background: #3f51b5;
color: #fff;
position: relative;
}
将style="position: relative"
到工具栏。
I had to do both of the suggested solutions (Rahul's and K K's) in order to make it work:我必须执行两个建议的解决方案(Rahul 和 K K)才能使其工作:
mat-toolbar
a position: relative
and a z-index
so the shadow will override the content below the toolbar:mat-toolbar
添加了一个position: relative
和一个z-index
这样阴影将覆盖工具栏下方的内容:.mat-toolbar {
position: relative;
z-index: 5;
}
<mat-toolbar class="mat-elevation-z8" color="primary">
...
</mat-toolbar>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.