Tu problema no es con el z-index ni con CSS.
Sino que el evento click se está propagando en el árbol de elementos y accionando el click del contenedor.
Para evitarlo tienes que cancelar la propagación
Código HTML:
Ver original<div class="contenedor" onclick="alert('acciona el click en el contenedor');"> <img src='algunsitio.jpg'/> <div id="boton" class="boton">contenido boton
</div>
Código Javascript
:
Ver originaldocument.getElementById("boton").onclick = function(e) {
alert('acciona el click del boton');
if(e && e.stopPropagation)
{
e.stopPropagation();
}
else
{
e = window.event;
e.cancelBubble = true;
}
}
Acá tienes un jsFiddle con el código funcionando