Webkit - fix positioned elements seem to have inherent stacking context

Question

Encountered this "bug" in Chrome when working with ScrollMagic and a fixed header.

I'll keep this short and simple, I want to place an absolute positioned element in front of another element, but the two are in separate fix positioned containers. Here's the Code:

.container {
    position: absolute;
}

.fixed {
    position: fixed;
    left: 100px;
}

.elm {
    position: absolute;
    width: 50px;
    height: 50px;
}

.elm-back {
    z-index: 1;
    top: 50px;
    left: 50px;
    background: teal;
}

.elm-front {
    z-index: 2;
    top: 25px;
    left: 25px;
    background: salmon;
}

<div class="container container-1">
    <div class="elm elm-front"></div>
</div>
<div class="container container-2">
    <div class="elm elm-back"></div>
</div>

<div class="container fixed container-1">
    <div class="elm elm-front"></div>
</div>
<div class="container fixed container-2">
    <div class="elm elm-back"></div>
</div>

The first two boxes are inside absolute positioned containers, the other two are inside fix positioned ones.

Firefox and IE both handle it as expected (image below).

While Chrome and Safari do the following:

Does someone know, e.g. have a source on why exactly this happens and hopefully a solution or workaround? I already tried using transform: translateZ(0), the only thing I can achieve with that is that the first two elements behave like the other two, but I want it the other way around.

Answer 1

You styled theirs containers as fixed, so they Z indexed to straight document - the containers. while the first group is Z indexed also to the document (because there isn't any relative parent in-between) but in the 1st is the elements that get styled so they Z indexed properly.

The browsers render's each of containers fixed position and put them each on other by they own algorithm, so if you want to fix it just let the browser know the Z index that you want for the containers as well:

.container-1 {
  z-index: 1;
}

.container-2 {
  z-index: 0;
}

or to put each absolute DIVs together from first so they will be Z-indexed to the same parent.