固定工具栏上的表格按钮

Question

当表中有更多数据时，我遇到了一个问题，我必须滚动数据，数据才被滚动，但是表中的按钮位于固定工具栏的顶部。

这是示例代码： https://stackblitz.com/edit/angular-ocrvtg

我该如何解决？

Answer 1

z-index的默认值为0，因此，如果将工具栏的z-index设置为1，将表的z-index设置为无z-index（或0）。它将解决问题。

Answer 2

使用sticky positioning。 IE11不支持此功能，但应正常降级。

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

---

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