Using translateY on thead and tbody messes up z-index

Question

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;
}

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.

Why is that is there a way around it?

Answer 1

I messed around a lot with z-index but didn't get anywhere.

So, working without z-index:

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

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

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

Note that transform-style has to be on parent.

It's a touch hacky but for lack of a better solution, here it is.

Answer 2

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-one-told-you-about-z-index/

The other article with a demo.

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

And a snippet from the spec itself:

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

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