概要
CSS の z-index プロパティは、要素とその子孫要素の z-order を定義します。要素同士が重なると、z-order はどちらが上にかぶさるのかを決めます。より大きな z-index の要素が、小さな z-index の要素の上にかぶさります。
位置指定されたボックスでは、z-index プロパティは次の定義を行います:
- 現在のスタック文脈における、ボックスのスタックレベル
- ボックスがローカルなスタック文脈を作るかどうか
| 初期値 | 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
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 |
|---|---|---|---|---|---|
| 基本サポート | ? | ? | ? | ? | ? |
関連情報
- CSS
positionプロパティ - CSS の z-index の理解