位置：粘性无法同时使顶部和左侧工作

Question

我正在尝试创建一个具有水平和垂直以及粘性标题和第一列的网格。

我用它来使标题粘住

 .thead {
     position: sticky;
     top: 0px;
 }

我用它来使第一列具有粘性。

 div.tbody>div.tr>div:nth-child(1) {
    position: sticky;
    left: 0;
}
.thead>div>div:nth-child(1){
    left:0;
    top:0;
    position: sticky;
}

但我得到了一个奇怪的滚动行为，即第一列标题粘在左侧而不是顶部。

这是我使用的代码。我怎样才能让它工作，以便第一个列标题将同时粘在左侧和顶部？

 .thead {
     position: sticky;
     top: 0px;
 }

 div.tbody>div.tr>div:nth-child(1) {
    position: sticky;
    left: 0;
}
.thead>div>div:nth-child(1){
    left:0;
    top:0;
    position: sticky;
}

Answer 1

最终我能够通过将theadz-index 设置为 1 来解决这个问题 - 无需任何 javascript 就解决了问题

.fixed_header {
  width: 300px;
  height: 300px;
  overflow: scroll;
}

.td,
.th {
  background-color: antiquewhite;
  width: 100px;
  float: left;
}

.thead {
  position: sticky;
  top: 0px;
  z-index:1;
}

.th {
  font-weight: bold;
}

.tr {
  display: block;
  clear: both;
  width: 500px;
}

.thead>div>div:nth-child(1) {
  left: 0;
  top: 0;
  position: sticky;
  
}

div.tbody>div.tr>div:nth-child(1) {
  position: sticky;
  left: 0;
  
}

<div class="fixed_header">
  <div class="thead">
    <div class="tr">
      <div class="th">Col 1</div>
      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
  </div>
</div>