【JavaScript】zindexを指定する

スポンサーリンク

複数ある要素の重なり順を変更したい場合は、z-indexを変更します。
数値が大きいほど上に表示されます。

コード例


elem1.style.zIndex = 1;
elem2.style.zIndex = 2;   // elem2の方が上に表示される

スタイルに関する設定ですから、styleが必要です。 そしてCSSで記述する場合は「z-index」ですが、 JavaScriptで記述する場合は「zIndex」なので注意してください。

サンプルプログラム

3つのボックス(正方形)が重なりあっています。下から赤、青、緑の順番。 ボタンをクリックすると、上から赤、青、緑の順番に変更します。

コード

コードは次のようになります(CSSは省略)。


<p><button id="btn">重なり順を変更する</button></p>
<div id="div_frame">
    <div id="div_a" class="rect">赤</div>
    <div id="div_b"  class="rect">青</div>
    <div id="div_c"  class="rect">緑</div>
</div>

<script>
var btn = document.getElementById('btn');
    
btn.addEventListener('click', function(){
    var div_a = document.getElementById('div_a');
    div_a.style.zIndex = 3;
    var div_b = document.getElementById('div_b');
    div_b.style.zIndex = 2;
    var div_c = document.getElementById('div_c');
    div_c.style.zIndex = 1;
});
</script>

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト