z-indexとは

• z-indexでは、ボックスの重なり順序を指定します。
• positionでstatic以外の値(relative,absolute,fixed,sticky)が指定されている要素に適用されます。
• 初期値はautoで、親と同じ階層になります。
• positionが指定されて、z-indexを指定しない場合は、後から書いたものが上層に、先に書いたものが下層に配置されます。

ちなみにz-indexを指定しない例

div {
    width: 100px;
    height: 100px;
    position: absolute;
    background: rgba(0,0,0,0.5);
}

<div style="top:0;  left:0;  background: red;"></div>
<div style="top:1em;  left:1em;  background: blue;"></div>
<div style="top:2em;  left:2em;  background: green;"></div>

結果(fiddle)

z-indexには最大値があります！

2147483647 = 2^31 – 1 = 0×7FFFFFFFで符号付き 32bit 整数の最大値

※ただし過去にはもっと低いこともありました。(Safari3)

最大値を超える指定をしたら？

• 2147483647と同じ扱いになります
• より後方にある要素が上に来ます
• なので最大値以上の値を指定する意味は無い

最大値を超える指定をしてみた例

div {
    width: 100px;
    height: 100px;
    position: absolute;
    background: rgba(0,0,0,0.5);
}

<div style="z-index: 2147483647;  top:0;  left:0;  background: red;"></div>
<div style="z-index: 2999999999;  top:1em;  left:1em;  background: blue;"></div>
<div style="z-index: 2147483647;  top:2em;  left:2em;  background: green;"></div>

結果(fiddle)

スタックコンテキストになるもの

• ルート要素(HTML)
• z-indexプロパティにauto以外の値を指定し、positionプロパティにstatic以外の値を指定した要素
• 1未満のopacityを指定した要素

スタックコンテキストを生成する(1)

.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }
.z4 { z-index: 4; }
div {
    position: absolute;
    width: 100px;
    height: 100px;
}

<div class="z2" style="top: 5em; left: 5em; background: green;">
    <div class="z4" style="top: 1em; left: 1em; background: gold;"></div>
</div>
<div class="z1" style="top: 1em; left: 1em; background: red;">
    <div class="z3" style="top: 1em; left: 1em; background: blue;"></div>
</div>

結果(fiddle)

//イメージ
┣.z2
┃┗.z4
┗.z1
　┗.z3

スタックコンテキストを生成する(2)

.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }
.z4 { z-index: 4; }
div {
    position: absolute;
    width: 100px;
    height: 100px;
}

<div class="z2" style="top: 5em; left: 5em; background: green;">
    <div class="z4" style="top: 1em; left: 1em; background: gold;"></div>
</div>
<div style="top: 1em; left: 1em; background: red;">
    <div class="z3" style="top: 1em; left: 1em; background: blue;"></div>
</div>

結果(fiddle)

//イメージ
┣.z2
┃┗.z4
┗.z3

スタックコンテキストを生成しない

• z-indexにautoを指定したボックスは親のスタックコンテキストの一部と考慮されます。
• 擬似要素を後ろに回り込ませる際に使用しています。

.box {
    position: relative;
    /*z-indexを指定しないが、z-index:auto;扱い*/
    width: 100px; height: 100px;
    background: tomato;
}
.box:before,
.box:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 4px;
    width: 50px; height: 20px;
    box-shadow: 0 2px 10px #000;
}
.box:before {
    left: 10px;
    -webkit-transform: rotate(-5deg);
}
.box:after {
    right: 10px;
    -webkit-transform: rotate(5deg);
}

結果(fiddle)

↑の例で親にz-indexを指定した場合

• z-indexに数値を指定した場合スタックコンテキストが生まれる
• 擬似要素のスタックレベルを下げても、親要素の背景よりも前に出る

.box {
    position: relative;
    z-index: 1; /*なんかの理由で指定した*/
    width: 100px; height: 100px;
    background: tomato;
}
.box:before,
.box:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 4px;
    width: 50px; height: 20px;
    box-shadow: 0 2px 10px #000;
}
.box:before {
    left: 10px;
    -webkit-transform: rotate(-5deg);
}
.box:after {
    right: 10px;
    -webkit-transform: rotate(5deg);
}

結果(fiddle)

z-index以外でもスタックコンテキストを生成するプロパティ

opacity

• z-indexを指定しなくてもopacityに1未満の値を指定する
• スタックレベルを0としたスタックコンテキストが生成される

opacityがスタックコンテキストを生成する例

.parent { position: relative; }
.icon {
    position: absolute;
    top: -5px; left: -5px;
    width: 50px; height: 50px;
    background: blue;
}
.img {
    width: 100px; height: 100px;
    background: red;
}
.img:hover { opacity: 0.5; }

<div class="parent">
    <div class="icon"></div>
    <div class="img"></div>
</div>

結果(fiddle)

↑の対応

適切なz-indexを指定する

.parent {
    position: relative;
}
.icon {
    position: absolute;
    top: -5px; left: -5px;
    width: 50px; height: 50px;
    background: blue;
    z-index: 1;
}
.img {
    width: 100px; height: 100px;
    background: red;
}
.img:hover {
    opacity: 0.5;
    /*z-index: 0;扱い*/
}

結果(fiddle)