Меню перекрытия Mat-Table выше при прокрутке

У меня mat-toolbar помещен над mat-table внутри mat-tab, я бы хотел, чтобы панель инструментов и заголовки таблиц были видны все время, однако, когда я прокручиваю страницу вниз, панель инструментов перекрывается с таблицей. Заголовки прокручиваются вверх до mat-tab, и я не могу заставить заголовки таблиц останавливаться внизу панели инструментов mat.

Посмотрев вокруг, люди предложили использовать свойство css sticky position, которое работает, чтобы моя панель инструментов оставалась видимой, но заголовки таблиц по-прежнему перекрываются. Я не знаю, как это исправить. Пример ниже:

Изображение позиции заголовка перед прокруткой

Изображение положения заголовка после прокрутки

Макет

<mat-tab-group>
    <mat-tab>
        <div fxLayout="column">
            <mat-toolbar fxLayout="row" fxLayoutAlign="start space-between" ngClass="table-toolbar sticky-top">
                ....BUTTONS....
            </mat-toolbar>
            <div fxLayout="column">
                <table mat-table [dataSource]="dataSource">
                    ....TABLE....
                    <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
                    <tr mat-row *matRowDef="columns: columns;"></tr>
                </table>
            </div>
        </div>
    </mat-tab>
</mat-tab-group>

Стили

.table-toolbar {
    height: 80px !important;
    padding-left: 24px !important;
    min-height: 80px !important;
}

.sticky-top {
    top: 0 !important;
    z-index: 1000 !important; // This only makes it appear above or below the table
    position: sticky;
}