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

问题描述

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

.app-content {高度:计算(100% - 64px)；溢出:自动；}

<button md-icon-button (click)="start.open()"><md-icon class="demo-toolbar-icon">菜单</md-icon><span>电子学习</span><span class="demo-fill-remaining"></span></md-工具栏><div class="app-content" style="z-index: 0!important;"><div class="workspace"><el-teacher></el-teacher>

解决方案

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

.mat-elevation-z5 {位置:相对；z-索引:2；}

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>

解决方案

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屋！