粘性表头滚动问题

Question

你好，我有粘性标题的问题。我有三列，但最后一列，当我滚动时，数据决定与我的标题重叠。我不确定它为什么要这样做。提前感谢！

问题屏幕截图：

​

我的CSS代码：

.Job-Report-Table {
      position: relative;
      display: flex;
      border-bottom: 2px solid #414141;
      max-height: 450px;
      overflow-y: scroll;
      thead th {
        position: sticky;
        top: 0;
      }
      .table {
        .tableHeader {
          font-size: 16px;
          color: #414141;
          // background-color: #d8d8d8;
          .cell-1 {
            background-color: #5b5b5b;
            color: #ffffff;
            vertical-align: middle;
          }
          .cell-2 {
            vertical-align: middle;
            background-color: #d8d8d8;
          }
          .cell-3 {
            vertical-align: middle;
            background-color: #d8d8d8;
          }
     }
}

Answer 1

z-index的额外好处。

您应该在thead th上将z-index设置为适当(更高)的值。如果没有指定其他z-index值，1就足够了。