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>