z-index

概要

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

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

形式文法: 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 visibility の定義	草案	`visibility` をアニメーション可能に定義
CSS Level 2 (Revision 1) z-index の定義	勧告	初回仕様

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能	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
基本サポート	?	?	?	?	?