如何更改表格元素中的元素堆叠顺序？

Question

就像下面的演示一样，第一行默认覆盖表的第一行，如何将其更改为第一行覆盖第一行？

我尝试使用z-index，但无法将<table> <thead> <tbody> <tr>元素设置为position: relative;，反正有这样做吗？

thead {
  background-color: yellow;
  transform: translateY(20px);
  z-index: 10;
}

tbody>tr>td {
  background-color: grey;
}

tbody>tr>td:first-child {
  background-color: orange;
  transform: translateX(10px);
}

<table>
  <thead>
    <tr>
      <td>HEAD</td>
      <td>NUMBER</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Answer 1

使用position: relative;和     z-index: -1;到第一个

thead {
  background-color: yellow;
  transform: translateY(20px);
  z-index: 10;
}

tbody>tr>td {
  background-color: grey;
}


tbody>tr>td:first-child {
background-color: orange;
transform: translateX(10px);
position: relative;
z-index: -1;
}
 

<table>
  <thead>
    <tr>
      <td>HEAD</td>
      <td>NUMBER</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Answer 2

我希望这是您要寻找的。从transform: translateY(20px);中删除了thead，并将transform: translateX(10px)添加到了thead

thead {
  background-color: yellow;
  transform: translateX(10px);
  z-index: 10;
}

tbody>tr>td {
  background-color: grey;
}

tbody>tr>td:first-child {
  background-color: orange;
  transform: translateX(10px);
}

<table>
  <thead>
    <tr>
      <td>HEAD</td>
      <td>NUMBER</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
  </tbody>
</table>