Ver Mensaje Individual
  #2 (permalink)  
Antiguo 05/03/2011, 00:15
Avatar de cristian_cena
cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: como podria hacer esto? o si teneis algun ejemplo a mano

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

Código HTML:
Ver original
  1. <div class="padre_capas">
  2. <div class="foto"></div> <!--o bien: <img class="foto" src="ruta/archivo.xxx">-->
  3. <div class="png"></div>
  4. <div class="texto"></div>
  5. </div>

Código CSS:
Ver original
  1. /*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*/
  2. .padre_capas{position:relative; width:...; height:...;}
  3.  
  4. /*para que z-index funcione las capas en cuestión deben estar posicionadas en relative, absolute, o fixed*/
  5. .foto, .png, .texto{position:absolute; width:...; height:...; display:block; top:0; left:0;}
  6.  
  7. /*Para que z-index funcione se debe aplicar esta propiedad a las capas que son hermanas entre si*/
  8. .foto{z-index:1; background-image:url('ruta/archivo.xxx');}/*si usaste <img> pues no le des background*/
  9. .png{z-index:2; background-image:url('tupng.png');}
  10. .texto{z-index:3;}

Espero te sea útil, un abrazo.