スタイルzIndexプロパティ
例
<img>要素のスタック順序を変更します。
document.getElementById("img1").style.zIndex = "1";
定義と使用法
zIndexプロパティは、配置された要素のスタック順序を設定または返します。
スタック順序(1)が大きい要素は、スタック順序(0)が小さい別の要素の前に常にあります。
ヒント: positioned要素は、positionプロパティがrelative、absolute、またはfixedに設定されている要素です。
ヒント:このプロパティは、重複する要素を作成する場合に役立ちます。
ブラウザのサポート
Property | |||||
---|---|---|---|---|---|
zIndex | Yes | Yes | Yes | Yes | Yes |
構文
zIndexプロパティを返します。
object.style.zIndex
zIndexプロパティを設定します。
object.style.zIndex = "auto|number|initial|inherit"
プロパティ値
Value | Description |
---|---|
auto | The browser determines the stack order of the element (based on its order in the document). This is default |
number | An integer that defines the stack order of the element. Negative values are allowed |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
技術的な詳細
デフォルト値: | 自動 |
---|---|
戻り値: | 要素のスタック順序を表す文字列 |
CSSバージョン | CSS2 |
その他の例
例
<div>要素のz-indexプロパティ値を変更します。
document.getElementById("myDIV").style.zIndex = "-1";
例
<img>要素のz-indexプロパティ値を返します。
alert(document.getElementById("img1").style.zIndex);
関連ページ
CSSチュートリアル:CSSポジショニング
CSSリファレンス:z-indexプロパティ
❮スタイルオブジェクト