angular-material2工具栏阴影 [英] angular-material2 toolbar shadow

问题描述

我是Material2的新手 我试图将主应用程序工具栏固定在屏幕顶部，但问题是高程无法正常工作(内容隐藏了工具栏的阴影) 这是我的HTML代码

I am new to material2 I am trying to keep the the main app toolbar fixed on the top of the screen the problem is that the elevation is not working correctly (the content hides the drop shadow of the toolbar) I Here is my HTML code

.app-content {
  height: calc(100% - 64px);
  overflow: auto;
}

<md-toolbar class="mat-elevation-z5" color="primary" style="z-index: 100!important;">

  <button md-icon-button (click)="start.open()">
      <md-icon class="demo-toolbar-icon">menu</md-icon>
    </button>
  <span>E-Learning</span>

  <span class="demo-fill-remaining"></span>
</md-toolbar>
<div class="app-content" style="z-index: 0!important;">
  <div class="workspace">
    <el-teacher></el-teacher>
  </div>
</div>

推荐答案

您必须为元素提供相对/绝对/固定/静态位置，以使z-index工作.

You have to provided position relative/absolute/fixed/static to your element to get z-index working.

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

这篇关于angular-material2工具栏阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！