css - 在 thead 和 tbody 上使用 translateY 弄乱了 z-index

Question

我在 tbody 和 thead 上使用 transform: translateY 将它们定位在一个大的 div 中。

table thead {
  transform: translateY(200px);
  background: green;
}

table tbody {
  transform: translateY(190px);
  background: blue;
}

在 webkit(Chrome 和 Safari)中，tbody 覆盖了 thead - 即使我将 z-index 添加到两个选择器。 Here an example . thead 应该始终可见，tbody 应该在背景中具有较低的 z-index。

为什么有解决办法？

Answer 1

我用 z-index 搞砸了很多，但没有得到任何结果。

因此，在没有 z-index 的情况下工作:

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

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

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

请注意，transform-style 必须位于父级上。

这有点老套，但由于缺乏更好的解决方案，就在这里。