tbody 内部 div 与翻译重叠的 thead（仅限 Chome）答案

【问题标题】：thead with translate overlapped by tbody inner div (Chome only)tbody 内部 div 与翻译重叠的 thead（仅限 Chome）
【发布时间】：2017-06-22 14:35:10
【问题描述】：

这只发生在 Chrome 中。这是我的非常复杂代码的超级简化版本，thead（浅蓝色）顶部不应有字母（“x”、“y”、“z”）其中，因为它在 Firefox 上的渲染效果很好，但在 Chrome 上，内部的 div position relative 似乎在某种程度上超过了 thead。

表格单元格内的position:relative 是绝对必要的看情况。

thead 如何超过 tbody？它似乎不尊重任何 z-index。
我知道thead 呈现在它自己的层上，因为它上面声明了 transform，但为什么该层不在 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 写在 tbody 之后，但仍然不是一个很好的修复

更新

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

【问题讨论】：

标签： css google-chrome

【解决方案1】：

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

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

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;
}

<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>

【讨论】：

当tr 有背景时，使用z-index:-1 不起作用，可悲的是，我的代码中有这个背景。否则这将是一个很好的解决方案。也不清楚为什么tr 的背景会导致div 被隐藏...
div 消失在 tr 后面可以通过删除其 position:relative 声明来修复（至少在这个简单的示例中）。我也很好奇你甚至试图通过 table 的这种奇怪组合来实现什么，它给你布局，然后相对定位的表格内容，我想逃避或覆盖布局 - 我不会永远尝试。
显然，如果不需要position:relative，我不会问这个问题。这就是重点，也许不清楚，我会编辑我的问题以使其更清楚
这是一个更复杂的整体表格组件的简化代码，它有一个固定的表格标题，当滚动时它会移动。 div 和 position:relative 是需要的，因为它里面有内部图标，众所周知，td 不能有 position:relative.. 而且，行可以扩展，这使得事情变得更加复杂。
lol 重新发明轮子...兄弟，在 JS 的旧时代，是我首先发明了轮子，很多年前...此外，我知道所有整个互联网上关于表格固定标题的示例和链接，我告诉你，它们都是业余工作。不接近真正的解决方案。请尝试编辑他们表格的单元格并插入一段非常大的文本..

【解决方案2】：

我在某个类似问题的另一个答案中找到了这个。这在我的情况下有效。现在我可以根据需要在我的 td 中使用位置样式。

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

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

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

【讨论】：