How can I overlay images (png) within a website?

Question

I am trying to mount an image in the middle of another (slightly larger) image so that it appears to be within the larger image (a phone in this case). I am unsure of the proper way to make this happen and any help is much appreciated!

Answer 1

You need to set the z-index css property.

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;
}

Here's a demo: http://jsfiddle.net/AlienWebguy/6VSBv/