Div sobrepor outra div ao click.

Tenho duas divs, ao clicar no comando ela aparece, ao clicar novamente desaparece. Estou querendo fazer com que pelo menos uma das duas fique visível sempre, ou seja, ao clicar em um ele sobreponha sobre o outro e vice-versa. Já tentei usar z-index no script mas não consegui. Segue o comando:

SCRIPT:

< script>

 function camada( sId ) {
var sDiv = document.getElementById( sId );
if( sDiv.style.visibility == "hidden" ) {
 sDiv.style.visibility = "visible";
 sDiv.style.height = "300px";

 sDiv.style.visibility = "hidden";
 sDiv.style.height = "1px";
}
 }
</ script>

< body>

<A HREF="#" ONCLICK="camada('menu')">Abre e fecha a camada 'menu'</A>

<!-- Camada 'menu' -->

<DIV ID="menu" STYLE=" position: fixed; TOP: 35px; LEFT: 5px; WIDTH: 800px; HEIGHT: 300px; z-index: 2; BACKGROUND: #FFFFFF; BORDER: 3px dotted #000000; VISIBILITY: visible;">
 CAMADA 1</DIV>

<!-- Camada 'menu' -->
<A HREF="#" ONCLICK="camada('menu2');">Abre e fecha a camada 'menu'</A>

<!-- Camada 'menu' -->

<DIV ID="menu2" STYLE=" position: fixed; TOP: 35px; LEFT: 5px; WIDTH: 800px; HEIGHT: 300px; BACKGROUND: #FFFFFF; BORDER: 3px dotted #000000; VISIBILITY: hidden;">
 CAMADA 2
</DIV>

</ body>