在页脚后面隐藏 mat-tab 内容答案

【问题标题】：Hide mat-tab content behind footer在页脚后面隐藏 mat-tab 内容
【发布时间】：2018-11-06 20:20:21
【问题描述】：

Angular 5，Angular 材质

我想实现一个带有两个<mat-tab> 元素的<mat-tab-group>，但我的标签中的内容总是在粘性页脚之前。

我已经尝试过设置 z-index。

Mat-Tab

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      Tab Title
    </ng-template>
    <div>
      lorem Impsu
    </div>
  </mat-tab>
</mat-tab-group>

页脚

.bottom-footer{
  width: 100%;
  left: 0;
  right: 0;
  position: fixed;
  bottom: 0;
}

<div class="bottom-footer">
  <div>Footer Content</div>
</div>

Stackbliz： https://stackblitz.com/edit/angular-material-hide-tab，把控制台移上来看看问题

【问题讨论】：

添加更多细节。
如果可以的话，在你复制你所面临的行为时，在 stackblitz、plunkr 等中提供一个工作示例；也分享一些你的实际代码
我已经尝试设置一个margin-bottom，这个没有有效的改变； mat-tab 的标题也在前景中
尝试将z-index: 1 添加到页脚，对你stackblitz 效果很好
成功了，非常感谢 :)

标签： angular angular-material

【解决方案1】：

根据您提供的代码，z-index 可以轻松解决您遇到的问题；我想你可能有语法错误，导致类不能正确应用。此外，您应该考虑使用footer HTML5 标签而不是div 来定义页脚部分。

.footer {
  background-color: green;
  width: 100%;
  left: 0;
  right: 0;
  position: fixed;
  bottom: 0;
  z-index: 1
}

【讨论】：