Dos Cajas con display:none y block una encima de otra

[diegoalonsomartin]

No se si me he explicado bien en el titulo, creo que no, la cosa es que estoy creando una pagina web en la que puse un poco del javascrip(la tipica funcion de mostrar u ocultar caja)
<script type="text/javascript">
function mostrarCaja() {
var caja = document.getElementById("caja");
caja.style.visibility = "visible";
}

function ocultarCaja() {
var caja = document.getElementById("caja");
caja.style.visibility = "hidden";
}
</script>
bueno todo eso bien en realidad en mi codigo funciona con un solo boton las dos funciones...
El boton es una imagen pero lo llamare boton...
esa caja tiene el style en none y cuando haces click sobre el boton se pone block y muestra la cajita en un mismo lugar(necesito que sea obligatoriamente en un mismo lugar).
Bueno el caso es q, supongamos dos botones en horizontal, cuando hacemos click en el primero muestra una caja gris con un"hola"(por ej) y cuando hacemos click en el otro boton sale otra caja encima de la anterior con un "adios"
todo bien no?bueno ahora si dejamos pulsado el boton que dice "adios" al pulsar el boton "hola" no sale nada, porque el div de adios esta mas abajo supongo y tiene prioridad...ahí va mi pregunta ¿hay algun metodo que conozcan que pueda hacer esto...siempre que al pulsar un boton se ponga encima de cualquier caja este donde este el lugar del div?
Este es el codigo en css de mi caja

.elemen{
position: absolute;
background-color:#CCC;
width: 800px;
height: 200px;
color:#003;
display:inline;
margin-top:150px;}


Lo de inline no es que estuviera puesto asi, es que estoy probando todo tipo de cosas pero a lo mejor con css es imposible hacer, solo queria preguntar


De antemano muchas gracias