z-indexを使って重なり順をつける方法とは？

2020年8月4日

この記事の目次

z-indexプロパティとは？

z-indexは、要素に重なり順を設定するためのプロパティです。positionプロパティのstatic以外の値が指定されている場合に有効となります。

z-indexの使い方

z-indexの使い方を見ていきましょう。

{
  z-index:整数;
}

値には、整数を指定します。この数値が高ければ高いほど前面（上）に表示されます。

ちなみに、基準値は0となります。z-indexを指定せずにpositionプロパティを使用して要素を重ねた場合には、下にある（ソースコードの後に掛かれた部分）要素が前面にきます。

以下の様な要素を重ねて表示させて、重なり順を変更してみましょう。

使用例：HTML

<div>
<p class="sample01">sample01</p>
<p class="sample02">sample02</p>
</div>

まずは、z-indexを指定せずに表示してみます。

使用例：CSS

div{
  position:relative;
  width:100%;
  height:230px;
  background:#ccc;
}
p.sample01{
  position:absolute;
  width:100px;
  height:100px;
  background:#b7d8fb;
}
p.sample02{
  position:absolute;
  width:200px;
  height:200px;
  background:#fbb7b7;
}

使用例：プラウザ

sample01

sample02

この状態だと、sample02が前面（上）にきています。このsample02の下にsample01が隠れている状態です。これをsample01が前面にくるようにz-indexを指定します。

使用例：CSS

div{
  position:relative;
  width:100%;
  height:230px;
  background:#ccc;
}
p.sample01{
  position:absolute;
  /*ここを追加*/
  z-index:1;
　/*ここまで追加*/
  width:100px;
  height:100px;
  background:#b7d8fb;
}
p.sample02{
  position:absolute;
  width:200px;
  height:200px;
  background:#fbb7b7;
}

使用例：プラウザ

sample01

sample02

これで、重なって表示ができました。今は2つの要素でしたが、いくつでも重なり順を指定することはできます。

z-indexを使う上での注意点

z-indexを使用する場合に注意しなければならないことがあります。

それは、「親要素の重なり順」です。例えば以下の様なコンテンツを作成したとします。

使用例：HTML

<div class="box01">
<p class="sample01">sample01</p>
</div>
<div class="box02">
<p class="sample02">sample02</p>
</div>

使用例：css

div.box01{
  position:absolute;
  z-index:2;
  width:100%;
  height:230px;
  background:#ccc;
}
p.sample01{
  position:absolute;
  z-index:1;
  width:100px;
  height:100px;
  background:#b7d8fb;
}
div.box02{
  position:absolute;
  z-index:1;
  width:100%;
  height:230px;
  background:#ccc;
}
p.sample02{
  position:absolute;
  z-index:3;
  width:200px;
  height:200px;
  background:#fbb7b7;
}