CSS ・ レイアウト
z-index
重なり順
要素が重なったときに、どれを手前に表示するかを数値で指定します。数値が大きいほど手前に表示されます。
01
サンプルコード
HTML
1<div class="stage">
2 <div class="box a">z-index: 1</div>
3 <div class="box b">z-index: 3</div>
4 <div class="box c">z-index: 2</div>
5</div>
CSS
1.stage {
2 position: relative;
3 height: 130px;
4}
5.box {
6 position: absolute;
7 width: 130px;
8 padding: 12px;
9 color: #fff;
10}
11.a {
12 top: 0; left: 0;
13 background: #5a3b0a;
14 z-index: 1;
15}
16.b {
17 top: 30px; left: 60px;
18 background: #b68235;
19 z-index: 3;
20}
21.c {
22 top: 60px; left: 120px;
23 background: #e1ad66;
24 z-index: 2;
25}
02
実行結果
ブラウザでの表示
03
解説
z-index は、要素の重なり順を整数で指定します。数値が大きいほど手前に表示されます。
position が static（初期値）の要素には効きません。relative や absolute などを指定した要素、または flex・grid のアイテムに使います。
親要素に z-index などが指定されていると「重ね合わせのグループ」ができ、子要素はそのグループの中でしか順番を変えられません。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
auto | 親と同じ重なりのグループで、順番は書いた順（初期値） |
1, 10, 100 | 整数。大きいほど手前 |
-1 | 負の値。親の背景より奥に回る |
値をCSS変数で管理する
重なり順を役割ごとに決めておくと、数値が大きくなりすぎるのを防げます。
CSS
1:root {
2 --z-header: 10;
3 --z-drawer: 50;
4 --z-modal: 100;
5}
6.site-header {
7 z-index: var(--z-header);
8}
注意点
- 01z-index が効かないときは、まず position が指定されているかを確認します。
- 029999 のような大きな値を乱用すると、後から管理できなくなります。