Well, the real problem here is not giving selected DIV a new z-index, but resetting/lowering that of all the others.
Or, employing some method so that the clicked div always get's the highest. Something like this is pretty simple and has drawbacks in certain situations, but it works<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>To top</title>
<meta name="Generator" content="TextPad 4.4" />
<meta name="Author" content="Peter Bailey" />
<style type="text/css">
div {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #999;
background-color: #DDD;
}
div#one {
left: 100px;
top: 30px;
z-index: 1;
}
div#two {
left: 30px;
top: 120px;
z-index: 1;
}
div#thr {
left: 180px;
top: 80px;
z-index: 1;
}
</style>
<script type="text/javascript">
function toTop( elem )
{
if ( !toTop.zIndex ) toTop.zIndex = 5;
elem.style.zIndex = ++toTop.zIndex;
}
</script>
</head>
<body>
<div id="one" onclick="toTop( this )"></div>
<div id="two" onclick="toTop( this )"></div>
<div id="thr" onclick="toTop( this )"></div>
</body>
</html>