z-indexの使い方:CSSで重なり順を指定する

CSSのz-indexの使い方まとめ

今回は、要素の重なり順を指定するCSSプロパティz-indexについて、分かりやすく解説します。

1. CSSのz-indexとは?

要素の重なりのイメージ

z-indexは要素の重なり順を指定するCSSのプロパティです。

◯◯ { z-index: 数字; }

このような書き方をします。◯◯では重なり順を変えたい要素を指定します(セレクタですね)。

数字の大きい方が上に

z-indexのイメージ

z-index:数字で指定した値が大きい要素ほど上に表示されます。数字には整数を入れます。

どんなときに使う?

position: absoluteで要素が重なっているときに使うことが多いですね。「要素が重なるときに使うもの」と理解しておけば良いでしょう。 absoluteとは?

z-indexの使用例

例として3つの重なった要素を作って、その順を指定してみます。とりあえず要素を重ねるだけにしてみます。まだz-indexは指定していません。

HTML
<div id="example">
	<p class="one">1番目</p>
	<p class="two">2番目</p>
	<p class="three">3番目</p>
</div>
CSS
/*親要素をrelativeに*/
 #example {position: relative;}

/*3つともabsoluteに*/
 .one, .two, .three{
	position: absolute;
}

.one	{left: 0; top: 0;}
.two	{left: 20px; top: 20px;}
.three	{left: 40px; top: 40px;}

/*色付けなどは省略*/
ブラウザ表示

ブラウザ表示例

何も指定しないと、後ろに書かれた要素が上に重なります。

z-indexを指定すると…

この重なり順をz-indexで変えてみましょう。1番目の要素には30、2番目には20、3番目には10と指定してみます。

CSS
/*略*/
.one	{
	z-index: 30;
	left: 0; top: 0;
	}
.two	{
	z-index: 20;
	left: 20px; top: 20px;
	}
.three	{
	z-index: 10;
	left: 20px; top: 20px;
	}

ブラウザ表示

z-indexの値を変えると…

z-indexの値が大きい要素ほど上に配置されました。このように下に隠れてしまっている要素を上に持ってくることができるのですね。

2. z-indexが効かないときの対処法

position: staticの要素には使えない!

誰もが一度はハマってしまうのがこの部分です。positionプロパティの初期値であるstaticではz-indexを指定できません。言い換えるとpositionで何も指定していない限り、z-indexは使えません。「効かない!」というときはまずはじめにここを疑ってみましょう。

効かない例

実際に例を見てみましょう。さきほどと同じように1〜3番の要素を作ります。1番目の要素に対してはpositionを何も指定しておらず、初期値のstaticとなっています。

HTML
<div id="example">
	<p class="one">1番目</p>
	<p class="two">2番目</p>
	<p class="three">3番目</p>
</div>
CSS
#example {
	position: relative;
}
.two	{
	position: absolute;
	left: 20px; top: 20px;
}
.three	{
	position: absolute;
	left: 40px; top: 40px;
}
/*色付けなどは省略*/

ブラウザ表示

ブラウザ表示例

z-indexを指定しても…

staticの1番目の要素に対してz-indexを指定してみます。

CSS
/*略*/
.one {z-index: 30;}
.two	{
	position: absolute;
	left: 20px; top: 20px;
	z-index: 20;
}
.three	{
	z-index: 10;
	position: absolute;
	left: 40px; top: 40px;
}
/*色付けなどは省略*/

ブラウザ表示

重なり順が変わらない例

↑「1番目」のz-indexは「3番目」よりも大きいにも関わらず背面に配置されています。このようにpositionが初期値のstaticになっているとz-indexは使えないわけですね。

対処法

対処法は簡単です。z-indexを指定したい要素のpositionrelativeabsolutefiexedのどれかにするだけです。今の要素の位置を変えたくない場合は、relativeにしましょう。

対処例

CSS
/*略*/
.one {
	position; relative
	z-index: 30;
}
.two	{
	position: absolute;
	left: 20px; top: 20px;
	z-index: 20;
}
.three	{
	z-index: 10;
	position: absolute;
	left: 40px; top: 40px;
}
/*色付けなどは省略*/

ブラウザ表示

ブラウザ表示例

要素に対してrelativeに指定すれば重なり順が指定できるようになるわけですね。

3. z-indexの指定できる値は?

ちなみにz-indexではかなり幅広い値を指定することができます。

  • 最小値:-2147483647
  • 最大値:2147483647
  • 整数のみ:小数点はNG

マイナスの値を指定することもできます。基本的に何も指定していない場合はz-index:0になっていると捉えてください。そのためマイナスの値にすると、何も指定していない要素よりも下に配置されます。

サルワカくんの顔(喜)
サルワカくん

複雑なウェブデザインをするときには要素の重なり順を指定することがよくあります。positionと合わせておさえておきましょう。

サルワカ