como podria hacer esto? o si teneis algun ejemplo a mano

[cristian_cena]

Hola gachon, es simple, solo debes usar la propiedad z-index.

Código HTML:

<div class="padre_capas">
<div class="foto"></div> <!--o bien: <img class="foto" src="ruta/archivo.xxx">-->
<div class="png"></div>
<div class="texto"></div>
</div>
 

Código CSS:

/*al contenedor de las capas con z-index le damos position:relative; porque usamos position:absolute en las capas hijas, de este modo éstas tomaran como referencia al eje de coordenadas 0,0 (esquina sup-izq) de la capa .padre_capas*/
.padre_capas{position:relative; width:...; height:...;}
 
/*para que z-index funcione las capas en cuestión deben estar posicionadas en relative, absolute, o fixed*/
.foto, .png, .texto{position:absolute; width:...; height:...; display:block; top:0; left:0;}
 
/*Para que z-index funcione se debe aplicar esta propiedad a las capas que son hermanas entre si*/
.foto{z-index:1; background-image:url('ruta/archivo.xxx');}/*si usaste <img> pues no le des background*/
.png{z-index:2; background-image:url('tupng.png');}
.texto{z-index:3;}
 

Espero te sea útil, un abrazo.