要素を最前面に移動する

DIV等の要素が重なっている場合に、特定の要素を動的に最前面に持ってくる方法についてです。

要素の重なり順を制御するためにスタイルにz-indexがあります。この値を適切に設定すれば、要素の順番を制御することができます。

<div id="A" style="z-index=20;width: 100px; 100px;background-color: Red;" /div>
<div id="B" style="z-index=10;width: 100px; 100px;background-color: Blue;" /div>

こうすれば”A”の要素が上に表示されます。これを以下のようすれば変更できます。

document.getElementById('B').style.zIndex = 30;

単純な方法

z-indexを使えば思い通りに制御できますが、一度使用すると常に意識する必要が出てきます。実際にはもっと簡単な方法があります。
z-indexが同じ(もしくは指定されない)場合、DOMの後ろにある要素が上に表示されます。これを使用した方法を示します(jQueryが必要)。

function bringToFlont(id) {
    var v = $('#' + id);
    v.appendTo(v.parent());
}
bringToFlont("B");