在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。 Here an example。 thead应该始终是可见的，并且tbody应该在背景中具有较低的z-index。

为什么有这种方法呢？

Answer 1

指定transform时，您将创建一个新的stacking context。你的thead和tbody的z-index不再共享一个共同的上下文（这就是为什么tbody高于thead，无论指定的z-index如何）。以下是一些讨论z-index和堆栈上下文的文章：

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

另一篇带有演示的文章。

http://benfrain.com/z-index-stacking-contexts-experimental-css-and-ios-safari/

以及规范本身的一个片段：

对于变换，除了none之外的任何计算值都会导致创建堆叠上下文和包含块。该对象充当固定定位后代的包含块。

http://www.w3.org/TR/css3-transforms/#transform-property

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

Answer 2

我和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 3

有一些解决方法可以将tad放在html之后，浏览器会正确地渲染它，而且它会被放置在tbody上，因为它会被追踪。

<table>
    <tbody>...</tbody>
    <thead>...</thead>
</table>

这也可以使用javascript完成。

$('thead').appendTo('table');

Answer 4

在你的例子中，不在tbody上设置变换会将thead带到前面。然后你可以通过设计table而不是thead / tbody来重新定位整个表格。不幸的是，在transform或thead上设置tbody将无法在Internet Explorer中使用。它将在td。

table {
    position: relative;
    top: 190px;
}

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

table tbody {
    background: blue;
}

http://jsfiddle.net/c0485yjw/

另见：-ms-transform won't work on table header group (thead) in IE10 (and below, presumably)