¿Cómo puedo superponer imágenes (png) dentro de un sitio web?

Question

Estoy tratando de montar una imagen en el medio de otra imagen (un poco más grande) para que parezca estar dentro de la imagen más grande (un teléfono en este caso). No estoy seguro de la forma correcta de hacer que esto suceda y cualquier ayuda es muy apreciada.

Answer 1

Debe establecer la propiedad z-index css.

HTML:

<img id="png1" src="png1.png" /> 
<img id="png2" src="png2.png" /> 

CSS:

#png1 { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:0; 
} 

#png2 { 
    position:absolute; 
    /* 
    set top and left here 
    */ 
    z-index:1; 
} 

He aquí una demostración: http://jsfiddle.net/AlienWebguy/6VSBv/

Answer 2

<img style="position:absolute;left:10px;top:10px;" src="img1.png"> 
<img style="position:absolute;left:20px;top:20px;" src="img2.png"> 

Por supuesto, usted tendrá que ajustar las coordenadas, y lo recomiendo altamente poner el CSS en una hoja de estilo en lugar de en línea. Aquí hay un buen tutorial sobre CSS para más información: http://www.csstutorial.net/

Answer 3

Así que usted es nuevo en html y CSS. Eso no es problema, pero su pregunta es un poco vaga para SO's general format.

Sin embargo, en pocas palabras:

<style> 
    #phone {background: url('http://www.knowabouthealth.com/wp-content/uploads/2010/06/iphone.jpg') center no-repeat; width: 300px; height: 392px; border: 1px solid #000000;} 
    #display {background: #000000; margin: 80px auto 0px; width: 164px; height: 246px; color: #FFFFFF;} 
</style> 
<div id="phone"> 
    <div id="display"> 
     Hello! What is up? Miley rocks! 
    </div> 
</div> 

ejemplo vivo: http://jsfiddle.net/cbn4L/

Por supuesto, esto es un ejemplo muy simple. Y como puede ver, el contenedor interno no es una imagen, sino texto. Técnicamente, puede agregar allí una imagen ahora ... pero a medida que le facilitamos el acceso al mundo de HTML & CSS, este es un mejor ejemplo y tal vez puede mejorar su concepto :)