Problema con z-index

[Arckengel]

Me pasa lo siguiente, tengo este codigo el cual tiene una imagen y un texto, quiero que el texto quede encima de la imagen. Supuestamente con z-index seria facil, pero no logro de ninguna forma que resulte, me queda al final la imagen sobre el texto.

Código HTML:

<div style="margin-top:10px; margin-right:20px; border: 1px solid #CCC; border-collapse: collapse;" >
    <img style="max-height:100px; max-width:400px; display: block; margin: auto; z-index:1; " src="css/images/Nosotros.png">
    <a style="float:left; margin-top:-100px; z-index:2;" href="#" ><h1>Nosotros</h1></a>
</div>
 
<div style="margin-top:10px; margin-right:20px; border: 1px solid #CCC; border-collapse: collapse;" >
    <img style="max-height:100px; max-width:400px; display: block; margin: auto; z-index:1;" src="css/images/Noticias.png">
    <a style="float:left; margin-top:-100px; " href="#" ><h1 style="z-index:2;">Noticias</h1></a>
</div>