はじめに
こんにちは！nayaaaaです！
CSSでz-indexを使用する機会があったのでそちらの備忘録になります。
z-indexとは
z-indexとはCSSの要素の重なり順の設定のことです。
以下の記事の通り、要素が重なる場合、z-indexの値が大きい順で前面に表示されるようです。
※z-indexを指定する際はpositionも合わせて設定する必要あり
実際に試してみた
以下のコードでは青がz-index:0 黄がz-index:1 赤がz-index:2と設定しています。
<style>
body {
height: 500px;
margin: 0;
}
.box {
position: absolute;
width: 200px;
height: 200px;
}
.blue {
background: blue;
left: 50px;
top: 50px;
z-index: 0;
}
.yellow {
background: yellow;
left: 100px;
top: 100px;
z-index: 1;
}
.red {
background: red;
left: 150px;
top: 150px;
z-index: 2;
}
</style>
</head>
<body>
<div class="box blue">z-index: 0</div>
<div class="box yellow">z-index: 1</div>
<div class="box red">z-index: 2</div>
</body>
</html>
実際のブラウザの表示
正しく大小順で重なり順が設定されており、表示されていますね。
z-indexの指定がないデフォルトの状態では優先順位はどのように設定されているのかが気になったため以下の通り試してみました。
<style>
body {
height: 500px;
margin: 0;
}
.box {
position: absolute;
width: 200px;
height: 200px;
}
.blue {
background: blue;
left: 50px;
top: 50px;
z-index: 0;
}
.yellow {
background: yellow;
left: 100px;
top: 100px;
z-index: 1;
}
.red {
background: red;
left: 150px;
top: 150px;
z-index: 2;
}
.green{
background: green;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div class="box blue">z-index: 0</div>
<div class="box yellow">z-index: 1</div>
<div class="box red">z-index: 2</div>
<div class="box green">z-index: なし</div>
</body>
</html>
ブラウザの表示
zindex:0の青とz-index:1黄の間に緑が表示されていますね。
デフォルト値は具体的な数値としては何が設定されているのかなと思いつつ、情報収集していたらとてもわかりやすく解説してくれている記事がありました。
z-indexのデフォルト値はautoです。0ではありません。
positionプロパティの値を設定した場合に、z-indexを指定していない状態（デフォルトの時）では、htmlで後に書いた要素が上に重なります。また、z-index値が同じ場合も、後に書いた要素が上に重なります。
z-indexを指定していない場合だと、autoで設定されているらしく、特定の値として設定されているわけでは無さそうですね。
上記の説明にもあるとおり、記述した前後関係で重なり順が変わるということなので、緑と青の記述の順序を逆にしてみました。
</style>
</head>
<body>
<div class="box green">z-index: なし</div>
<div class="box blue">z-index: 0</div>
<div class="box yellow">z-index: 1</div>
<div class="box red">z-index: 2</div>
</body>
</html>
ブラウザの表示
すると、青が緑より前面に表示されるようになりました。
また、こちらのz-indexはpositionを設定しないと正しく機能しないとのことなので以下の通りにpositionあり、なしも試してみました。
<style>
body {
height: 500px;
margin: 0;
}
.box {
width: 200px;
height: 200px;
}
.red {
background: red;
position: absolute;
left: 50px;
top: 50px;
z-index: 1;
}
.blue {
background: blue;
left: 100px;
top: 100px;
z-index: 2;
}
</style>
<div class="red box">positionあり</div>
<div class="blue box">positionなし</div>
ブラウザの表示
z-index:1で指定した赤が前面に表示されており、z-index:2で設定した青が後ろに表示され、やはりpositionを設定しないとz-indexが機能しないように見えます。
※left topも機能しないようです。
→positionを設定しないと、デフォルトでpositionはstaticに設定されており、この状態では重ね合わせコンテキスト（スタッキングコンテキスト）が機能しないようです。
まとめ
今回は、z-index値について以下のことがわかりました。
- z-indexを使用すると要素の重なり順を指定できる
- z-indexのデフォルトはauto
- z-indexはpositionとセットで使う
以上、z-indexについて備忘録も兼ねての記事となります。
ありがとうございました！