Как при клике на DIV отобразить его поверх других?

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

Как при клике на DIV отобразить его поверх других?

Всем доброго времени суток.
Ситуация следующая...
Имеется 5 слоёв. Пользователь может их перетаскивать в пределах определённой области.
Проблема:
при перемещении слоёв (div) они накладываются друг на друга, согласно z-index, который сохраняется в БД и имеет порядок определяемый пользователем. Как при клике на слое отобразить его поверх других не изменив при этом порядок отображения других слоёв? То есть, если к примеру у нас был следующий порядок:
слой 1 - индекс 0,
слой 2 - индекс 1,
слой 3 - индекс 2,
слой 4 - индекс 3,
слой 5 - индекс 4,
то как при клике на слое 3 получить следуещее:
слой 1 - индекс 0,
слой 2 - индекс 1,
слой 4 - индекс 2,
слой 5 - индекс 3,
слой 3 - индекс 4 ?
В jave "мёртвый", может в самом языке какая функция есть, типа "тор" или что-то в этом роде? Заранее благодарю всех откликнувшихся.

Вам нужен document.getElementById(id).style.zIndex:

Код:

<HTML>

<HEAD>

<TITLE>Document Title</TITLE>



<script type="text/javascript">

<!--

topLevel=5 // top z-index

lastID=""

function changeZindex(obj){

id=obj.id

document.getElementById(id).style.zIndex=topLevel



if(lastID==""){

lastID=id

}



if(lastID==id){

document.getElementById(id).style.zIndex=topLevel

}

else{

document.getElementById(lastID).style.zIndex=""

}



lastID=id

}

// -->

</script>



<style type="text/css">

<!--

#d1{position:absolute; left:0px; top:0px; width:100px; height:100px; z-index:1; background-color:green}

#d2{position:absolute; left:20px; top:20px; width:100px; height:100px; z-index:2; background-color:yellow}

#d3{position:absolute; left:40px; top:40px; width:100px; height:100px; z-index:3; background-color:red}

#d4{position:absolute; left:60px; top:60px; width:100px; height:100px; z-index:4; background-color:blue}

-->

</style>



</HEAD>

<BODY>



<center>



<div style="position:relative;width:110px">



<div id="d1" onclick="changeZindex(this)">A</div>

<div id="d2" onclick="changeZindex(this)">B</div>

<div id="d3" onclick="changeZindex(this)">C</div>

<div id="d4" onclick="changeZindex(this)">D</div>



</div>



</center>

</BODY>

</HTML>