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

1. CSSのz-indexとは？

CSSのセレクタとは？覚えておきたい25種類と書き方

数字の大きい方が上に

どんなときに使う？

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

z-indexの使用例

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

<div id="example">
  <p class="one">1番目</p>
  <p class="two">2番目</p>
  <p class="three">3番目</p>
</div>

/*親要素を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と指定してみます。

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

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

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

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

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

効かない例

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

<div id="example">
	<p class="one">1番目</p>
	<p class="two">2番目</p>
	<p class="three">3番目</p>
</div>

#example {
  position: relative;
}
.two {
  position: absolute;
  left: 20px;
  top: 20px;
}
.three {
  position: absolute;
  left: 40px;
  top: 40px;
}
/*色付けなどは省略*/

z-indexを指定しても…

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

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

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

対処法

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

対処例

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

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

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

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

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