CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテム (display: flex が付いた要素の子) の z 順を定義します。要素同士が重なると、 z 順はどちらが上にかぶさるのかを決めます。 z-index がより大きな要素が、より小さな要素の上にかぶさります。

位置指定されたボックス (つまり、 positionstatic 以外のもの) では、 z-index プロパティが以下のことを定義します。

  1. 現在の重ね合わせコンテキストにおけるボックスの重ね合わせレベル
  2. ボックスがローカルな重ね合わせコンテキストを作るかどうか

構文

/* キーワード値 */
z-index: auto;

/* <integer> 値 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* 負の数は優先度を下げる */

/* グローバル値 */
z-index: inherit;
z-index: initial;
z-index: unset;

z-index プロパティは、キーワード auto 又は <integer> のどちらかで指定します。

auto
ボックスはローカルな重ね合わせコンテキストを新たに作りません。現在の重ね合わせコンテキストで作られたボックスは、親ボックスと同じ重ね合わせレベルを持ちます。
<integer>
この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル 0 のローカルの重ね合わせコンテキストを作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。

形式文法

auto | <integer>

HTML

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>

CSS

.dashed-box { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box { 
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box { 
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

結果

仕様書

仕様書 状況 備考
CSS Transitions
animation behavior for z-index の定義
草案 z-index をアニメーション可能として定義
CSS Level 2 (Revision 1)
z-index の定義
勧告 初回定義

初期値auto
適用対象配置された要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類integer
正規順序形式文法で定義される一意のあいまいでない順序
Creates stacking contextあり

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121441
Negative values1123441
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり
Negative values あり あり あり あり あり あり あり

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,