スタイル zIndex 属性

定義と使用方法

zIndex 属性設定または定位要素のスタック順序を返します。

より高いスタック順序 (1) を持つ要素は、より低いスタック順序 (0) を持つ別の要素の前に常に位置します。

ヒント：定位要素は position 属性 を設定します：relative、absolute または fixed の要素。

ヒント：重ね合わせ要素を作成する場合、この属性は非常に役立ちます。

も参照してください：

CSS チュートリアル：CSS 定位

CSS リファレンスマニュアル：z-index 属性

例

例 1

<img>要素のスタック順序を変更する：

document.getElementById("img1").style.zIndex = "1";

自分で試してみてください

例 2

<div>要素のz-index属性値を変更する：

document.getElementById("myDIV").style.zIndex = "-1";

自分で試してみてください

例 3

<img>要素のz-index属性値を返します：

alert(document.getElementById("img1").style.zIndex);

自分で試してみてください

文法

zIndex 属性を返す：

object.style.zIndex

zIndex 属性を設定する：

object.style.zIndex = "auto|number|initial|inherit"

属性値

値 説明
auto ブラウザが要素のスタック順序を決定します（ドキュメント内の順序に基づいて）。デフォルト。
number 要素のスタック順序を定義する整数。負の値も許可されます。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit 親要素からこの属性を継承します。参照してください inherit。

技術的詳細

デフォルト値： auto
返り値： 文字列、要素のスタック順序を表します。
CSS バージョン： CSS2

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート