Кнопки таблицы над фиксированной панелью инструментов

Question

У меня проблема, когда в таблице больше данных, и мне приходится прокручивать данные, данные прокручиваются, но кнопки из таблицы перемещаются поверх фиксированной панели инструментов.

Вотпример кода: https://stackblitz.com/edit/angular-ocrvtg

Как я могу это исправить?

Answer 1

z-index имеет значение по умолчанию 0, поэтому, если вы установите z-index для панели инструментов на 1, а для таблицы - нет z-index (или 0).Это решит проблему.

Answer 2

Используйте липкое позиционирование . Не поддерживается в IE11, но должно изящно ухудшаться.

.toolbar--sticky {
    position: sticky;
    top: 0;
    z-index: 2;
    position: -webkit-sticky;
}

---

<mat-toolbar color="primary" class="toolbar--sticky">