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

我和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。您的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/

来自规范本身的片段：

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

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

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

Answer 3

有一种解决方法，可以将thead放在html之后，浏览器将正确呈现它，并且thead将放置在tbody上因为它是追赶。

/**
 *  A %reverse_iterator across other types can be copied if the
 *  underlying %iterator can be converted to the type of @c current.
 */

这也可以使用javascript完成。

<table>
    <tbody>...</tbody>
    <thead>...</thead>
</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)

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

4 个答案: