在thead和tbody上使用translateY弄乱了z-index [英] Using translateY on thead and tbody messes up z-index

问题描述

我正在使用transform:将tbody和thead上的translateY放置在较大的div中.

I'm using transform: translateY on tbody and thead to position them in a large div.

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

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

在webkit(Chrome和Safari)中，即使我在两个选择器中都添加了z-index，tbody也会覆盖thead. 这里是一个例子. thead应该始终保持可见，并且tbody的背景应该具有较低的z-index.

In webkit (Chrome and Safari) the tbody overlays the thead - even when I add z-index to both selectors. Here an example. The thead should always be visible at all times, and the tbody should have a lower z-index being in the background.

为什么可以解决呢?

推荐答案

指定transform时，将创建一个新的stacking context.您的thead和tbody的z-index不再共享公共上下文(这就是为什么tbody高于thead的原因，而不管指定的z-index如何).这是几篇讨论z-index和堆栈上下文的文章:

When you specify transform, you create a new stacking context. Your z-index for thead and tbody no longer share a common context (which is why tbody is above thead, regardless of the specified z-index). Here's are a couple articles that discusses z-index and stacking context:

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

另一篇带有演示的文章.

The other article with a demo.

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

以及规范本身的摘录:

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

Any computed value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

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

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

Unfortunately, you'll probably need to re-think your use of transform to work around the stacking context issue.

这篇关于在thead和tbody上使用translateY弄乱了z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！