CSS z-index 属性

定義と使用法

z-index 属性は要素のスタック順序を設定します。高いスタック順序を持つ要素は、低いスタック順序を持つ要素の前に常に配置されます。

注記：要素は負の z-index 属性値を持つことができます。

注記：Z-index は定位要素（例えば position:absolute;）上でのみ効果があります！

説明

この属性は、定位要素（例えば position:absolute;）に沿って z 軸の位置を設定します。z 軸は、ディスプレイエリアに垂直に伸びる軸です。正の数の場合はユーザーに近く、負の数の場合はユーザーから遠いことを意味します。

参照もどうぞ：

CSS 教程：CSS 定位

HTML DOM リファレンスマニュアル：zIndex 属性

例

画像の z-index を設定します：

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

実際に試してみる

CSS 文法

z-index: auto;number|initial|inherit;

属性値

値 説明
auto デフォルト。スタック順序は親要素と同じです。
number 要素のスタック順序を設定します。
inherit 親要素から z-index 属性の値を継承することを指定します。

技術的な詳細

デフォルト値： auto
継承性： no
バージョン： CSS2
JavaScript 文法： object.style.zIndex="1"

さらに多くの例

Z-index
Z-index は、1要素を別の要素の後ろに配置するために使用できます。
Z-index
前の例の要素では Z-index が変更されています。

ブラウザのサポート

テーブルの数字には、その属性を完全にサポートする最初のブラウザのバージョンが記載されています。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 3.0 1.0 4.0