Webkit - fixing positioned elements seems to have an intrinsic stacking context
Found this bug in Chrome when working with ScrollMagic and fixed title.
I'll keep it short and simple, I want to place an absolute positioned element in front of another element, but these two are in separate fixed position 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 fixed positioned ones.
Firefox and IE handle it as expected (image below).
So far Chrome and Safari are doing the following:
Does anyone know, for example. is there a source why exactly this is happening and hopefully a solution or workaround? I have already tried using transform: translateZ(0)
, the only thing I can achieve is that the first two elements behave like the other two, but I want it the other way around.
source to share
You have created your containers as fixed, so they are indexed by Z to direct document - containers . while the first group Z is also indexed by the document (because there is no relative parent between them), but in the first, these are elements that are styled so that they are indexed correctly.
Browsers render each of the fixed container positions and place them inside each other according to their own algorithm, so if you want to fix that, let the browser know the Z index, which you want for containers as well:
.container-1 {
z-index: 1;
}
.container-2 {
z-index: 0;
}
or concatenate all absolute DIVs together so that they are indexed by Z to the same parent.
source to share