CSSのz-indexプロパティは、HTMLの要素とその子孫要素のZ軸を定義する。HTMLの要素同士が重なった場合、Z軸が大きい要素が上(手前)に表示される。

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

構文

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

適用対象

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

サンプル

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
スポンサーリンク