CSS z-indexプロパティ

z-indexとは、重なり合ったHTML要素の前面・背面を指定するCSSプロパティである。Z軸の値を-2,147,483,647から2,147,483,647までの数値で指定すると、Z軸の値が大きい要素が上(手前)に表示される。

使い方

z-index: z-order
z-order
表示優先度
属性値 説明
auto 親要素と同じ階層(初期値)
数値 0を基準として最小値-2,147,483,647から最大値2,147,483,647までの数値
inherit 親要素のz-indexプロパティを継承

適用先

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

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

position z-index
未指定 効かない
static 効かない
relative 効く
absolute 効く
fixed 効く

継承

z-index CSSプロパティは、親要素の設定を継承しない。

サンプル

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>
div1
div2

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>
div1
div2

CSSプロパティ

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

参考文献

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