Смена слоев при наведении курсора
 

У меня есть три слоя. Один слой над другим. Как мне сделать что бы при наведении курсора на слой они менялись позициями???
Я реализовал это спомощью style.display="none":

<div style="position: absolute; width: 100px; height: 100px; z-index: auto; left: 630px; top: 120px; background-color: #800000" id="layer1" onmouseout="aClick1();">1слой</div>
<div style="position: absolute; width: 100px; height: 100px; z-index: auto; left: 630px; top: 120px; background-color: #000080" id="layer2" onmouseout="aClick2();">2слой</div>

<script>function aClick1() { document.getElementById("layer1").style.display="none"; document.getElementById("layer2").style.display="block"; }</script>
<script>function aClick2() { document.getElementById("layer2").style.display="none"; document.getElementById("layer1").style.display="block"; }</script>

а можно как то что бы они не исчезали а просто менялись позициями(тоесть один спереди, другой за ним и меняются местами)???

z-index

http://jsfiddle.net/ZVWVw/

это css, а можно это реализовать как то на js???

.style.zIndex