z-indexとは?

z-indexは要素の重なり順を指定するCSSのプロパティです。
通常では後に記述されたものが画面では手前に配置されますが、
z-indexを使用することによって自由に優先順位を設定することができます。

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

position: absoluteで要素が重なっているときに使うことが多いです。
「要素が重なるときに使うもの」と理解しておくと良いです。

【z-indexは以下のように記述します。】

◯◯ {
  z-index: 数字;
}

以下でz-indexの指定方法をみていきましょう。

z-indexの指定方法

【例1 z-index指定なし】

【HTML】

<div id="sample">
  <p class="one">1番目：吉田朱里</p>
  <p class="two">2番目：渡辺麻友</p>
  <p class="three">3番目：矢吹奈子</p>
</div>

【CSS】

/*親要素をrelativeに*/

#sample {
position: relative;
}

/*3つともabsoluteに*/
.one .two .three{
  position: absolute;
  /*3要素ともabsoluteに*/
  width: 200px;
  height: 100px;
}
.one	{left: 0; top: 0;}
.two	{left: 40px; top: 40px;}
.three	{left: 80px; top: 80px;}
/*色付けなどは省略*/

【例2：表示例】

⬆︎何も指定しないと、後ろに書かれた要素が上に重なります。

z-index指定あり

この重なり順をz-indexで変えてみましょう。
1番目の要素には30、2番目には20、3番目には10と指定してみます。

【CSS】
/*HTML略*/

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

【例3：表示例】

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