【CSS入門】z-indexを使えば要素の重なり順は思うがまま

この記事ではCSSのz-indexプロパティについて解説します。

z-indexとは？

要素の重なり順を指定します。

positionプロパティでstatic(デフォルト)以外の値が指定されている要素にのみ適用されます。

z-indexの使い方

z-indexに指定できる値は以下の通りです。

z-index: auto;

z-indexの初期値がこれです。

整数での指定がない場合と同じで通常の重なり順で表示されます(つまり後に記述されている要素が上に表示)。z-index: auto;は整数でいうと0なので、z-index:0;になっていると考えます。

HTML

<div class="BOX-A">BOX-A</div>
<div class="BOX-B">BOX-B</div>
<div class="BOX-C">BOX-C</div>

CSS

.BOX-A,
.BOX-B,
.BOX-C{
  position: absolute;
  width: 300px;
  height: 200px;
}

.BOX-A{
  top: 0;
  left: 0;
  background: orange;
}

.BOX-B{
  top: 30px;
  left: 60px;
  background: blue;
}

.BOX-C{
  top: 60px;
  left: 120px;
  background: yellow;
}

z-index: 整数;

要素の重なり順を整数で指定します。指定は整数のみなので小数点は使えませんが、マイナスは指定出来ます。

0を基準として数字が大きいほど上に重なります。例えば上のz-index: auto;にある例のBOX-Aにのみz-index:1;を記述すると、以下のようにBOX-Aが1番上に重なって表示されます。

CSS

.BOX-A{
  top: 0;
  left: 0;
  background: orange;
  z-index: 1;
}

BOX-AではなくBOX-Bにのみz-index:1;を記述すると、以下のようにBOX-Bが1番上に重なって表示されます。

CSS

.BOX-B{
  top: 0;
  left: 0;
  background: blue;
  z-index: 1;
}

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の3点です。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。