翻译的thead与tbody inner div重叠（仅限Chome）

Question

仅在Chrome中发生这种情况。这是我的非常复杂代码的超简化版本，thead（浅蓝色）不应该有字母（“x”，“y”，“z”）最重要的是，因为它在Firefox上呈现出色，但在Chrome上，似乎内部div position relative以某种方式超越了thead。

  

表格单元格中的position:relative绝对是必不可少的   这种情况。

thead如何超过 tbody？ 它似乎不尊重任何z指数 我知道thead在自己的图层上呈现，因为它上面有一个转换，但为什么不在tbody之上的那层？并且只在Chrome上？很奇怪。在Google上找不到任何关于此的内容。

table > thead {
  background: lightblue;
  z-index: 20;
}

td, th { padding: 2em ;}

table td:first-child > div {
  position: relative;
  background: lightyellow;
  padding: 1em;
}

<table>
  <thead style="transform: translate(0, 50px);">
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>x</div>
      </td>
      <td>
        <div>y</div>
      </td>
      <td>
        <div>z</div>
      </td>
    </tr>
  </tbody>
</table>

这应该是它的样子（就像在Firefox上一样）：

请记住，这是一个简化演示，其中thead有一个翻译，这是由JS实际控制的，这里没有包含它，因为它与问题无关，并且只有硬编码的结果写成<thead style="transform: translate(0, 50px);">

我设法绕过构造HTML的错误，因此thead在<{strong> tbody之后编写，但仍然不是一个很好的解决方法

更新

似乎是我的“解决方案”，用于将thead移动到tbody之后导致一个错误的世界，再次只在Chrome中（像往常一样）并且Chrome渲染表格单元格时带有巨大的填充thead节点向下移动到DOM。现在，我没有看到任何解决分层问题的方法。

Answer 1

我无法解释为什么会发生这一切。但是我发现向div添加z-index: -1会将其发送回它所属的位置。

此外，如果我从thead中移除position: relative;，但它可能完全相同（至少在Chrome中），但也许其他浏览器需要它。

＆＃13;

＆＃13;

table > thead {
  position: relative;
  background: lightblue;
  z-index: 20;
}

td, th { padding: 2em ;}

table td:first-child > div {
  position: relative;
  z-index: -1;
  background: lightyellow;
  padding: 1em;
}

＆＃13;

<table>
  <thead style="transform: translate(0, 50px);">
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div>x</div></td>
      <td><div>y</div></td>
      <td><div>z</div></td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我在另一个类似问题的答案中找到了这个。就我而言，这是可行的。现在，我可以根据需要在td中使用位置样式。

table {
    transform-style: preserve-3d;
}

thead {
    transform: translate3d(0, 0, 1px);
}

tbody {
    transform: translate3d(0, 0, 0);
}