--- title: z-index slug: Web/CSS/z-index tags: - CSS - CSS プロパティ - CSS 位置指定レイアウト - Reference translation_of: Web/CSS/z-index ---
{{CSSRef}}

CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。

{{EmbedInteractiveExample("pages/css/z-index.html")}}

位置指定されたボックス (つまり、 position が static 以外のもの) では、 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 とは比較されないということです。

形式文法

{{csssyntax}}

例

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;
}

結果

{{ EmbedLiveSample('Examples', '550', '200', '') }}

仕様書

仕様書 状態 備考
{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}} {{Spec2('CSS3 Transitions')}} z-index をアニメーション可能として定義
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}} {{Spec2('CSS2.1')}} 初回定義

{{cssinfo}}

ブラウザーの互換性

{{Compat("css.properties.z-index")}}

関連情報