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

mdstage

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

2018.3.2

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

この記事の目次

z-indexプロパティとは？
z-indexの使い方
z-indexを使う上での注意点
理解するポイント

1.z-indexプロパティとは？

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

2.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つの要素でしたが、いくつでも重なり順を指定することはできます。

3.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;
}

使用例：プラウザ

sample01

sample02

上記を見ると最も大きな値のz-indexが指定されているのは、「sample02」というボックスです。しかし、最前面に表示されているのは、「sample01」です。なぜでしょうか？
実は、それぞれのボックスの親要素である「box01」と「box02」にもz-indexが指定されていることが原因です。親要素同士の関係では、「box01」の方が値が大きいことがわかります。
つまり、「親要素にz-indexが指定されている場合、子要素のz-indexはその親要素内でしか効かない」ということです。

z-indexを使用する際には、親要素の重なり順も気にする必要があるということを覚えておきましょう。