Css 带平移的THAD由tbody内部div重叠（仅适用于Chome）

这只发生在Chrome中。这是我的非常复杂代码的超级简化版本，

thead

（浅蓝色）不应该在上面有字母（“x”、“y”、“z”），因为它在Firefox上表现得非常出色，但在Chrome上，内部的

div

相对位置

似乎在某种程度上超越了

thead

表格单元格中的

位置：相对
是绝对必要的
对形势的反应

thead
怎么能超过
tbody
？
它似乎不尊重任何z指数。

我知道
thead
是在它自己的层上渲染的，因为它在上面声明了一个转换，但是为什么该层不在tbody之上呢？而且只在铬上？很奇怪。在谷歌上找不到与此相关的任何信息。
table>thead{
背景：浅蓝色；
z指数：20；
}
td，th{padding:2em；}
表td:first child>div{
位置：相对位置；
背景：浅黄色；
填充：1em；
}

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

此外，如果我删除
位置：relative，它的工作原理完全相同（至少在Chrome中是如此）从thead，但可能其他浏览器需要它


table>thead{
位置：相对位置；
背景：浅蓝色；
z指数：20；
}
td，th{padding:2em；}
表td:first child>div{
位置：相对位置；
z指数：-1；
背景：浅黄色；
填充：1em；
}

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

此外，如果我删除
位置：relative，它的工作原理完全相同（至少在Chrome中是如此）从thead，但可能其他浏览器需要它


table>thead{
位置：相对位置；
背景：浅蓝色；
z指数：20；
}
td，th{padding:2em；}
表td:first child>div{
位置：相对位置；
z指数：-1；
背景：浅黄色；
填充：1em；
}

A.
B
C
x
Y
Z
我在类似问题的另一个答案中找到了这一点。这在我的情况下奏效了。现在，我可以根据需要在td中使用位置样式

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

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

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

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

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

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

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

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