Question

角度5，角度材料

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

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

垫子

<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，向上移动控制台以查看问题

Answer 1

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

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

将页签内容隐藏在页脚后面

1 个答案: