CSSのpositionは、static, absolute, relative, fixedがあり、デフォルトではstaticです。
要素のZ軸上での重なりは必ずしも、z-indexの値や、HTMLで記述した順番通りではなく、 このpositionとも密接な関係があります。
まずz-indexを指定せず、positionだけを考えた場合、次の順番で重ねられて表示されます。
- positionがstaticな要素（HTMLで記述されている順番）
- positionがstaticではない要素（HTMLで記述されている順番）
absolute、relative、fixedなどstaticではない要素は、 デフォルトのstaticな要素よりも記述順番に関係なく 必ずZ軸上で手前に描画されるという点は重要です。
そして問題となるのはpositionがstaticの要素にはz-indexの指定はできない点です。 W3Cの定義には次の通り、absolute, relative, fixed以外でz-indexは動作しないとあります。
Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).
staticな要素にはz-indexが指定できない。そして、前項目のルールの通り、 staticでない子要素のほうが必ずZ軸上手前に表示されるという点も考えると、 staticな要素を手間に表示することは不可能なように思えます。
z-indexが負の値の場合の取り扱いを示す明確なドキュメントが見当たらないので、 ここからは検証済みでの内容ではありますが推測です。
staticな要素はz-indexが指定できないのではなく、常にauto(0)として処理されているようです。
そこで、 staticな要素を、そうでない要素よりも上に表示したい場合、 z-indexに負の値を指定することで実現できるようです。 (IE 11.11, MS Edge 25.1, Firefox 42.0, Chrome 46.0で確認済みです)
たとえば、以下のdiv2(赤)はdiv1(fixed,青)より上に表示されます。
<style type="text/css">
div {
width: 100px;
height: 100px;
}
.div1 {
background: #00E;
position: fixed;
z-index: -1;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
}
.div2 {
background: #E00;
}
</style>
<div class="div1"></div>
<div class="div2"></div>