css - 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.