今回は、要素の重なり順を指定するCSSプロパティz-indexについて、解説していきたいと思います。
z-indexとは
z-indexは要素の重なり順を指定するCSSのプロパティです。z-indexは以下のように記述します。
.selector {
z-index: 10;
}
.selectorには、重なり順を変えたい要素を指定します。
原則としてz-indexは値が大きくなるほど上に表示されます。例えば、z-index: 10;の要素より、z-index:20;の要素のほうが上に表示されるということです。
z-indexの使用シーン
z-indexの使用シーンとしては、position: absoluteやposition: fixedなどで、要素を重ねた時などに重なり順を指定するのに利用したりすることが多いです。
z-indexの使用例
今回は例として３つの重なった要素を作って、その順を指定してみます。まず、z-indexを指定せずに要素を重ねるだけにしてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="example">
<p class="one">1番目</p>
<p class="two">2番目</p>
<p class="three">3番目</p>
</div>
</body>
</html>
# example {
position: relative;
}
.one, .two, .three {
position: absolute;
}
.one {
left: 0;
top: 0;
background-color: #ff0000;
border-color: #ff0000;
}
.two {
left: 20px;
top: 20px;
background-color: #f0e68f;
border-color: #f0e68f;
}
.three {
left: 40px;
top: 40px;
background-color: #17a2b8;
border-color: #17a2b8;
}
上記を見て分かるように、通常要素というのは後から書かれたものが上に来るようになります。
この重なり順をz-indexで変えたときの挙動を見ていきましょう。1番目の要素には50、2番目には40、3番目には30と指定してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="example">
<p class="one">1番目</p>
<p class="two">2番目</p>
<p class="three">3番目</p>
</div>
</body>
</html>
# example {
position: relative;
}
.one, .two, .three {
position: absolute;
}
.one {
z-index: 50;
left: 0;
top: 0;
background-color: #ff0000;
border-color: #ff0000;
}
.two {
z-index: 40;
left: 20px;
top: 20px;
background-color: #f0e68f;
border-color: #f0e68f;
}
.three {
z-index: 30;
left: 40px;
top: 40px;
background-color: #17a2b8;
border-color: #17a2b8;
}
z-indexの値が大きい要素ほど上に配置されました。このように下に隠れてしまっている要素を上に持ってくることができるのがz-indexになります。
z-indexが効かない時の原因
原因1.position: staticの要素には使用できない
positionプロパティの初期値であるstaticではz-indexを指定することが出来ません。つまり、positionで何か指定していない限り、z-indexは使えません。「効かない！」というときはまず最初にここを確認してみましょう。
原因2.指定値が正しくない
z-indexでは指定できる値に制限があります。
指定できる値は以下になります。
整数のみ：小数点はNG
初期値は０
最小値：-2147483647
最大値：2147483647
z-indexではマイナス値を指定することができますが、z-indexをしていない要素のz-index値は0であるため、マイナスを指定すると通常の要素より下に表示されることになります。
また、指定できる最大値、最小値がありますので、無意味に999999999…などと指定しても意味がないので注意しましょう。
複雑なウェブデザインをするときには要素の重なり順を指定することがよくありますので、positionと合わせておさえておきましょう。