We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

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

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

  1. 現在のスタック文脈における、ボックスのスタックレベル
  2. ボックスがローカルなスタック文脈を作るかどうか
初期値auto
適用対象配置された要素
継承不可
メディアvisual
計算値指定値
Animation typeinteger
正規順序形式文法で定義される一意のあいまいでない順序
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
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
基本サポート ? ? ? ? ?

関連情報

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

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