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

z-indexの使い方：CSSで重なり順を指定する
要素の重なり順を変えるCSSの「z-index」について図を使って解説します。効かないときの対処法もまとめてあります。
saruwakakun.com

前回の講座

CSSのpositionを総まとめ！absoluteやfixedの使い方は？

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

この記事の目次
1. CSSのz-indexとは？
2. z-indexが効かないときの対処法
1. position: staticの要素には使えない！
  1. 効かない例
2. 対処法
3. z-indexの指定できる値は？
1. HTML＆CSS入門

この記事の目次

1. CSSのz-indexとは？

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

◯◯ { z-index: 数字; }

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

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

数字の大きい方が上に

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

どんなときに使う？

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

z-indexの使用例

例として３つの重なった要素を作って、その順を指定してみます。とりあえず要素を重ねるだけにしてみます。まだ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: 40px;
  top: 40px;
}

ブラウザ表示

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

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

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

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

効かない例

実際に例を見てみましょう。さきほどと同じように１〜３番の要素を作ります。１番目の要素に対しては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の１番目の要素に対してz-indexを指定してみます。

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

ブラウザ表示