在 thead 和 tbody 上使用 translateY 会弄乱 z-index答案

【问题标题】：Using translateY on thead and tbody messes up z-index在 thead 和 tbody 上使用 translateY 会弄乱 z-index
【发布时间】：2014-11-06 01:07:09
【问题描述】：

我在 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。

为什么有办法解决它？

【问题讨论】：

这里的另一个答案：stackoverflow.com/questions/32816750/…

标签： css transform

【解决方案1】：

我在z-index 上搞砸了很多，但没有成功。

所以，在没有z-index 的情况下工作：

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

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

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

请注意，transform-style 必须在父节点上。

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

【讨论】：

这成功了！没想到会使用 translate3d
绝对的救命稻草。我已经尝试过 translate3d，但不知道上面的 transform-style 属性。

【解决方案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/

还有来自规范本身的 sn-p：

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

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

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

【讨论】：

感谢您的回复。有趣的是，Firefox 正在“正确地”呈现它。我想知道它与 webkit 相比如何实现转换。
好点，@bengro。根据spec“任何计算值，除了 none 之外的转换都会导致创建堆叠上下文和包含块。该对象充当固定定位后代的包含块。”如果 FireFox 没有创建新的堆栈上下文，那么它们似乎没有遵循规范。
花了很长时间寻找解释，很高兴在这里找到你的解释。重新思考变换的使用是什么意思？
谢谢！ other than none 帮助了我。我用javascript设置transform，我从来不需要z-index和transform，所以只需将transform设置为none而不是''就解决了我的问题。

【解决方案3】：

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

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

这也可以用 javascript 来完成。

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

【讨论】：

【解决方案4】：

在您的示例中，未在 tbody 上设置转换会将 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't work on table header group (thead) in IE10 (and below, presumably)

【讨论】：