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>
 

[pitufoweb]

Hola,

z-indez solo funciona con elementos posicionados.



Saludos

[Arckengel]

Iniciado por pitufoweb

Hola,

z-indez solo funciona con elementos posicionados.



Saludos

Pero como lo hago entonces para lograr el efecto que quiero?

[ArturoGallegos]

Código HTML:

<img style="max-height:100px; max-width:400px; display: block; margin: auto;position:absolute;z-index:-1;" src="css/images/Noticias.png">