在thead和tbody上使用translateY会混淆z-index

Question

我正在使用变换:在tbody和thead上的translateY将它们放在一个大的div中.

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

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

在webkit(Chrome和Safari)中,tbody覆盖了thead - 即使我向两个选择器添加了z-index.这是一个例子.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必须是父母.

这是一个触摸hacky,但由于缺乏更好的解决方案,这里是.

Answer 2

指定时transform，将创建一个新的stacking context。您的z索引为thead和tbody不再共享公共的上下文（这就是为什么TBODY高于THEAD，而不管指定的z索引的）。以下是讨论z-index和堆栈上下文的几篇文章：

另一篇带有演示的文章。

以及规范本身的摘录：

转换中除无以外的任何计算值都会导致创建堆栈上下文和包含块。该对象充当固定位置后代的包含块。

不幸的是，您可能需要重新考虑使用转换来解决堆栈上下文问题。