Скрыть содержимое вкладки за нижним колонтитулом

Question

Угловой 5, Угловой Материал

Я хочу реализовать <mat-tab-group> с двумя <mat-tab> элементами, но содержимое моей вкладки всегда перед липким нижним колонтитулом.

Я уже пытался установить 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>

Footer

.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
}