在ad和tbody上使用translateY会弄乱z索引

Question

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

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

在webkit（Chrome和Safari）中，即使我在两个选择器中都添加了z索引，tbody也会覆盖thead。这里是一个例子。thead应该始终可见，tbody应该在背景中具有较低的z索引。

为什么有办法绕过它？

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必须在父级上。

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

Answer 2

指定transform时，将创建一个新的stacking context。thead和tbody的z索引不再共享一个公共上下文（这就是为什么无论指定的z索引如何，tbody都高于ad）。以下是几篇讨论z索引和堆叠上下文的文章：

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

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

Answer 3

有一种变通方法，可以将ad放在html中的tbody之后，浏览器将正确渲染它，并且ad将定位在tbody上因为它在后面。

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

这也可以通过javascript来实现。

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

Answer 4

在您的示例中，不在tbody上设置transform会使thead处于最前面。然后可以通过设置table而不是thead/tbody的样式来重新定位整个表。不幸的是，在thead或tbody上设置transform在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'；无法处理IE10（可能是更低版本）中的表头组（thead）