Html 滚动时，上面的Mat Table重叠菜单

我有一个

mat工具栏

放在

mat tab

内的

mat tab

上，我想让工具栏和表头始终可见，但是，当我向下滚动页面时，工具栏与表重叠。标题向上滚动到mat选项卡的顶部，我似乎无法让表格标题停在mat工具栏的底部

环顾四周，人们建议使用sticky position css属性，它可以让我的工具栏保持可见，但表头仍然重叠。我不知道如何解决这个问题。示例如下：

滚动前标题位置的图像

滚动后标题位置的图像

布局

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

---

您可以尝试覆盖垫子台面顶部位置。通常设置为0，您可以覆盖到所需的像素。这是一个例子。

.mat table sticky{
顶部：80px！重要；
}

您可以尝试覆盖垫子台面顶部位置。通常设置为0，您可以覆盖到所需的像素。这是一个例子。

.mat table sticky{
顶部：80px！重要；
}

这是一种非常简单的方法，但是，如果您的组件使用可变大小的标题（即，如果一个组件上有一个工具栏+过滤器行，而另一个组件上只有一个工具栏），那么这将只处理静态设置大小。我现在将此标记为答案，但我相信这可以变得更加动态。这是一种非常简单的方法来让它工作，但是，如果您的组件使用可变大小的标题（即，如果一个组件上有一个工具栏+过滤器行，而另一个组件上只有一个工具栏），那么这将只解决静态设置大小。我将把这个标记为现在的答案，但我相信这可以变得更具活力。

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