Showcase: fixed position z-index context

It looks like in modern browsers a "position: fixed" will give elements an inherent z-index context based on their place in markup.

by Simon Harte

HTML

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

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

CSS

html, body {
    margin: 0;
}

.container {
    position: absolute;
}

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

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

.elm-back {
    z-index: 1;
    top: 75px;
    left: 75px;
    background: orange;
}

.elm-middle {
    z-index: 2;
    top: 50px;
    left: 50px;
    background: teal;
}

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

JavaScript

/**
Since we're not giving the fixed containers any z-index values you would expect their children to behave the same as within absolute positioned elements, e.g. the children's z-index values are accounted for as given.

In this showcase you can see that fixed positioned elements seem to generate an inherent z-index context based on their place in the markup, thus reversing the visual item order.
**/