Modificar z-index con un clic

[spocnic]

Supongamos que tengo una lista cualquiera

Código HTML:

<ul>
     <li><a href="#">elemento uno</a></li>
     <li><a href="#">elemento dos</a></li>
     <li><a href="#">elemento tres</a></li>     
</ul>
 

por otro lado tenemos div superpuesto es decir uno encima de otro

Código HTML:

<div id="uno"></div>
<div id="dos"></div>
<div id="tres"></div>
 

como están superpuesto es decir uno encima de otro el div "tres" esta arriba de "dos" y de "uno". El div "dos" esta por debajo de "tres" y por encima que "uno" y el div "uno" es por debajo de los otros dos. Teniendo esto en cuenta...

De que forma se podría hacer para que cuando se de clic en "elemento uno" el div "uno" cambie el orden es decir se ponga por arriba de "dos" y "tres". Cuando se clic en "elemento dos" el div "dos" quede por encima de los otros div y así sucesivamente...

Había pensado en utilizar javascript con z-index pero no se si sea buena opción, alguno tiene alguna idea...

No puedo pensar en deshabilitar los div ya que estos contienen imagenes con transparencias y precisamente lo que quiero es que se vea algunas partes de un dibujo jugando con los div...