z-index

概要

CSS の z-index プロパティは、要素とその子孫要素の z-order を定義します。要素同士が重なると、z-order はどちらが上にかぶさるのかを決めます。より大きな z-index の要素が、小さな z-index の要素の上にかぶさります。

位置指定されたボックスでは、z-index プロパティは次の定義を行います:

  1. 現在のスタック文脈における、ボックスのスタックレベル
  2. ボックスがローカルなスタック文脈を作るかどうか
初期値auto
適用対象配置された要素
継承不可
メディアvisual
計算値指定値
アニメーションの可否可。 の値として補完しますinteger
正規順序形式文法で定義される一意のあいまいでない順序
Creates stacking context継承する

構文

形式文法: auto | <integer>
z-index: auto     /* キーワードによる値指定 */
z-index: 0        /* <整数> による値指定 */
z-index: 3
z-index: 289

z-index: inherit

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

position:relative; z-index:1; position:absolute; z-index:2; left:60px; top:3em; position:absolute; z-index:3;
left:20em; top:-25px; opacity:0.9

仕様書

仕様書 策定状況 コメント
CSS Transitions
The definition of 'visibility' in that specification.
草案 visibility をアニメーション可能に定義
CSS Level 2 (Revision 1)
The definition of 'z-index' in that specification.
勧告 初回仕様

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 4.0 4.0 1.0
負の値 (CSS2.1の動作。古いCSS2では許可されていない) 1.0 3.0 (1.9) 4.0 4.0 1.0
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

関連情報

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

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