z-index

div.test { position: relative; z-index: 10;}
div.test1 { position: absolute; z-index: -1;}
div.test2 { position: absolute; z-index: auto;}

<div style="z-index: 2; position: absolute; border: solid 7px #ff0; width: 200px; height: 200px;">ここはdiv要素です。『z-index: 2』と指定しています。</div>
<div style="z-index: 1; position: absolute; border: solid 7px #0ff; width: 200px; height: 200px; left: 100px; top: 100px;">ここはdiv要素です。『z-index: 1』と指定しています。</div>

要素の重なり具合(スタックレベル)を指定します。『z-index』プロパティは『position』プロパティが『static』以外に指定されている要素に反映させることができます。

『z-index』プロパティを使用する際の注意点として、『z-index』プロパティは属している『スタックコンテキスト』(スタック文脈)の中での重なり具合を調節するプロパティであるというところに注意してください。『スタックコンテキスト』とは各要素の奥行きの構造を形成するまとまりのようなものです。html要素は自動で『ルートスタックコンテキスト』というスタックコンテキストを生成しますので全ての要素は何かしらの『スタックコンテキスト』に属していることになります。

値に『auto』と指定した場合は親要素と同じ階層(スタックコンテキスト)に属し、通常のレイアウトのように、より下部に記述してあるほうが上にきます。この場合は新たな『スタックコンテキスト』が生成されることはありません。そして『auto』となっている要素のスタックレベルは『0』です。『z-index: auto』とした場合と『z-index: 0』とした場合の違いは新たな『スタックコンテキスト』が生成されるかされないか、という違いになります。

<p>以下の要素は全て『z-index: auto』と指定しています。なので黄色い枠のdiv要素よりも下部に記述してある水色の枠のdiv要素が上に来ます。</p>
<div style="z-index: auto; position: absolute; border: solid 7px yellow; width: 200px; height: 200px;">ここはdiv要素です。『z-index: auto』と指定しています。</div>
<div style="z-index: auto; position: absolute; border: solid 7px aqua; width: 200px; height: 200px; left: 100px; top: 150px;">ここはdiv要素です。『z-index: auto』と指定しています。</div>

数値で指定した場合、同じ『スタックコンテキスト』の中で、より数値の大きいほうが手前に表示されます。数値に負の値を指定しても属している『スタックコンテキスト』よりも奥に配置されることはありません。属している『スタックコンテキスト』が同じであるならば単純に数値が大きいほうが手前に表示されるだけの話であると考えると良いかもしれません。

<p>以下の要素はすべてhtml要素が生成した『ルートスタックコンテキスト』に属しています。ですので単純に『z-index』の数値が大きいほうが手前に表示されます。</p>
<div style="z-index: 0; position: absolute; border: solid 7px yellow; width: 200px; height: 200px;">ここはdiv要素です。『z-index: 0』と指定しています。</div>
<div style="z-index: -1; position: absolute; border: solid 7px aqua; width: 200px; height: 200px; left: 100px; top: 200px;">ここはdiv要素です。『z-index: -1』と指定しています。</div>

数値で指定した場合は新たな『スタックコンテキスト』が生成されます。『z-index』プロパティの値が『auto』以外に指定されている祖先要素を持つ場合、その要素は祖先要素が生成した『スタックコンテキスト』に属します。そして、自分が属していない『スタックコンテキスト』の重なり具合はその要素の『z-index』プロパティでは調整することができません。属している『スタックコンテキスト』が違う場合は単純に『z-index』の数値が大きいほうが手前に表示される、という話ではなくなりますのでご注意ください。違う世界(スタックコンテキスト)には干渉できない、と考えると良いかもしれません。

<p>以下は『z-index : 0』のdiv要素(黄色枠の要素)と『z-index: -1』のdiv要素(水色枠の要素)があり、『z-index: -1』のdiv要素の子要素であるdiv要素(赤文字の要素)に『z-index: 100』と指定しています。『z-index: 100』のdiv要素は属している『スタックコンテキスト』に『z-index: -1』と指定がされているため、どんなに大きな数値を指定しても黄色枠のdiv要素より手前に表示されることはありません。</p>
<div style="z-index: 0; position: absolute; border: solid 7px yellow; width: 200px; height: 200px;">ここはdiv要素です。『z-index: 0』と指定しています。</div>
<div style="z-index: -1; position: absolute; border: solid 7px aqua; width: 300px; height: 200px; left: 100px; top: 240px;">
	ここはdiv要素です。『z-index: -1』と指定しています。
	<div style="z-index: 100; color: red;">ここはdiv要素です。『z-index: 100』と指定しています。属している『スタックコンテキスト』の関係でこの要素は黄色枠のdiv要素よりも手前にくることはできません。</div>
</div>

数値で指定した場合の最大値と最小値は32bit符号付き整数の値の範囲となりますのでCSS定義上では『-2147483648』〜『2147483648』の値が取れます。ただし、あまりにも小さい、もしくは大きい数値で『z-index』を指定するパターンは一般的な実装ではあまり行われないので避けたほうが無難かもしれません。

『z-index』プロパティはこちらの記事でも詳しく解説をしております。