CSS z-index

z-indexとは、重なり合ったHTML要素の前面・背面を指定するCSSプロパティである。Z軸の値を整数値で指定すると、Z軸の値が大きい要素が上（手前）に表示される。

使い方

z-index: z-order

z-order

表示優先度

属性値	説明
auto	親要素と同じ階層(初期値)
整数値	0を基準として、マイナスを含む整数値
inherit	親要素のz-indexプロパティを継承

最大値

CSSのz-indexプロパティに指定できる整数の最大値は、仕様で規定されていない。最大値はウェブブラウザによって異なる。

マイナス

CSSのz-indexプロパティには、マイナスの値も指定できる。

適用先

位置指定された要素(positionプロパティがabsolute、fixed又はrelativeいずれかである要素)

CSSのz-indexを指定するには、positionにabsolute、fixedまたはrelativeを指定する必要がある。positionがstatic(初期値)の場合、z-indexの指定は効かない。

継承

子要素のz-indexプロパティは、親要素のz-indexプロパティの値を継承しない。親要素のz-indexプロパティの値を継承するためには、z-indexプロパティにinheritを指定して、明示的に継承する必要がある。

z-index: inherit;

サンプル

2つのdiv要素を重ねて表示するサンプルを示す。

<div style="position: relative;">
  <div style="background-color:aqua; height:100px; width:100px;">
    div1
  </div>
  <div style="background-color:lime; height:100px; width:100px; position:absolute; top:20px; left:20px;">
    div2
  </div>
</div>

z-indexとpositionを指定したサンプルを示す。

<div style="position: relative">
  <div style="background-color:aqua; height:100px; width:100px; position:absolute; z-index:1;">
    div1
  </div>
  <div style="background-color:lime; height:100px; width:100px; position:absolute; top:20px; left:20px;">
    div2
  </div>
</div>

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

CSSのpositionプロパティにabsolute、fixedまたはrelativeを指定したときにのみ、z-indexプロパティが有効になる。

z-indexプロパティ効かない場合、z-indexプロパティを指定した要素に対して、positionプロパティが指定あることと、positionプロパティにabsolute、fixedまたはrelativeを指定していることを確認する。

スクロールしてもヘッダやフッタを固定する

ヘッダやフッタの位置を固定して、スクロールしても動かないようにするには、ヘッダやフッタに対して「position: fixed;」を指定する。

header {
  position: fixed;
}

ただし、ヘッダやフッタがスクロール領域の後ろに隠れてしまうことがある。ヘッダやフッタを常に最前面に表示させるためには「z-index: 1;」を指定する。

header {
  position: fixed;
  z-index: 1;
}

CSSプロパティ

CSSには次のプロパティがある。

参考文献

W3C (2016) "Visual formatting model" Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification