CSS の z-index プロパティは、位置指定要素とその子孫要素の 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
適用対象配置された要素
継承不可
メディアvisual
計算値指定値
アニメーションの種類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,