style.zIndexは、要素のスタイル属性のz-indexプロパティの値を取得、もしくは、設定するプロパティ。
z-indexプロパティは、ボックス要素の重なり順を指定することができる。
positionプロパティに「relative、absolute、fixed」を指定した場合だけ有効となる。
構文
取得
var $zIndex = $elementReference.style.zIndex;
戻り値
要素のスタイル属性のz-indexプロパティの値。
設定
$elementReference.style.zIndex = "auto | number | inherit";
- auto | number | inherit
- ボックス要素の重なり順を指定。
- 下記の何れかの値を指定する。初期設定値は「auto」。
- auto：自動設定。
- number：整数。大きい数ほど前面に表示する。小さい数ほど後面に表示する。負数を指定することもできる。
- inherit：親要素の設定を継承。
サンプル
z-index: auto
z-index: 1
z-index: 2
z-index: 3
サンプルボックス要素
サンプルボックス要素の変更後のz-indexプロパティの値：
サンプルの動作について
- 「auto」ボタンをクリックすると、「z-index: auto」のボックス要素より前、「z-index: 1」と「z-index: 2」と「z-index: 3」のボックス要素より後ろの位置に「サンプルボックス要素」を配置し、「サンプルボックス要素の変更後のz-indexプロパティの値：」の右横に「auto」と表示する。
- 「1」ボタンをクリックすると、「z-index: auto」と「z-index: 1」のボックス要素より前、「z-index: 2」と「z-index: 3」のボックス要素より後ろの位置に「サンプルボックス要素」を配置し、「サンプルボックス要素の変更後のz-indexプロパティの値：」の右横に「1」と表示する。
- 「2」ボタンをクリックすると、「z-index: auto」と「z-index: 1」と「z-index: 2」のボックス要素より前、「z-index: 3」のボックス要素より後ろの位置に「サンプルボックス要素」を配置し、「サンプルボックス要素の変更後のz-indexプロパティの値：」の右横に「2」と表示する。
- 「3」ボタンをクリックすると、「z-index: auto」と「z-index: 1」と「z-index: 2」と「z-index: 3」のボックス要素より前の位置に「サンプルボックス要素」を配置し、「サンプルボックス要素の変更後のz-indexプロパティの値：」の右横に「3」と表示する。
- 「-1」ボタンをクリックすると、「z-index: auto」と「z-index: 1」と「z-index: 2」と「z-index: 3」のボックス要素より後ろの位置に「サンプルボックス要素」を配置し、「サンプルボックス要素の変更後のz-indexプロパティの値：」の右横に「-1」と表示する。
- 「継承」ボタンをクリックすると、「サンプルボックス要素」の配置設定を親要素から継承し、「サンプルボックス要素の変更後のz-indexプロパティの値：」の右横に「inherit」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setZIndex( $zIndex ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.zIndex = $zIndex;
var $zIndex = $elementReference.style.zIndex;
document.getElementById( "sampleOutput" ).innerHTML = $zIndex;
}
</script>
function setZIndex( $zIndex ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.zIndex = $zIndex;
var $zIndex = $elementReference.style.zIndex;
document.getElementById( "sampleOutput" ).innerHTML = $zIndex;
}
</script>
HTML
<div style="position: relative; margin: 20px; width: 400px; height: 400px;">
<div style="z-index: auto; position: absolute; top: 0; left: 0; border: 1px solid blue; background-color: pink; width: 198px; height: 198px;">
z-index: auto
</div>
<div style="z-index: 1; position: absolute; top: 0; left: 200px; border: 1px solid blue; background-color: pink; width: 198px; height: 198px;">
z-index: 1
</div>
<div style="z-index: 2; position: absolute; top: 200px; left: 0; border: 1px solid blue; background-color: pink; width: 198px; height: 198px;">
z-index: 2
</div>
<div style="z-index: 3; position: absolute; top: 200px; left: 200px; border: 1px solid blue; background-color: pink; width: 198px; height: 198px;">
z-index: 3
</div>
<div id="sample" style="position: absolute; top: 100px; left: 100px; border: 1px solid red; background-color: yellow; width: 198px; height: 198px;">
サンプルボックス要素
</div>
</div>
<button onclick="setZIndex('auto');">auto</button>
<button onclick="setZIndex('1');">1</button>
<button onclick="setZIndex('2');">2</button>
<button onclick="setZIndex('3');">3</button>
<button onclick="setZIndex('-1');">-1</button>
<button onclick="setZIndex('inherit');">継承</button>
<br />
<p>サンプルボックス要素の変更後のz-indexプロパティの値：<span id="sampleOutput"></span></p>
<div style="z-index: auto; position: absolute; top: 0; left: 0; border: 1px solid blue; background-color: pink; width: 198px; height: 198px;">
z-index: auto
</div>
<div style="z-index: 1; position: absolute; top: 0; left: 200px; border: 1px solid blue; background-color: pink; width: 198px; height: 198px;">
z-index: 1
</div>
<div style="z-index: 2; position: absolute; top: 200px; left: 0; border: 1px solid blue; background-color: pink; width: 198px; height: 198px;">
z-index: 2
</div>
<div style="z-index: 3; position: absolute; top: 200px; left: 200px; border: 1px solid blue; background-color: pink; width: 198px; height: 198px;">
z-index: 3
</div>
<div id="sample" style="position: absolute; top: 100px; left: 100px; border: 1px solid red; background-color: yellow; width: 198px; height: 198px;">
サンプルボックス要素
</div>
</div>
<button onclick="setZIndex('auto');">auto</button>
<button onclick="setZIndex('1');">1</button>
<button onclick="setZIndex('2');">2</button>
<button onclick="setZIndex('3');">3</button>
<button onclick="setZIndex('-1');">-1</button>
<button onclick="setZIndex('inherit');">継承</button>
<br />
<p>サンプルボックス要素の変更後のz-indexプロパティの値：<span id="sampleOutput"></span></p>