CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの 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あり

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 4Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Negative valuesChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3IE 完全対応 4Opera 完全対応 4Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報

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

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