How do I overlap two images in one DIV?

Question

How do I overlap two images in one DIV? I have these two images, which I'd like to stack one on top of the other

    <div id="personImgDiv">
<img id="scaleImg" src="http://hddfhm.com/images/clipart-110-scale-2.gif" />
<img id="personImg" src="http://vignette4.wikia.nocookie.net/simpsons/images/6/69/The_simpsons_ralph_wiggum-1-.png/revision/latest?cb=20141124210636" />

</div>

I thought this CSS would do it ...

#scaleImg {
  position: relative;
  top: 0px;
  left: 0px;
}


#personImg {
  position: relative;
  top: 0px;

But it isn't. Here's the Fiddle that demonstrates my problem -- https://jsfiddle.net/vksLv6ew/

Answer 1

For this behaviour, the container element should be relative and the children must be absolute.

I.e. the children will have absolute positioning relative to the container. Here is the corresponding style:

#container {
    position: relative;
}

#container img {
    position: absolute;
    top: 0;
    left: 0;
}

<div id="container">
    <img src="http://hddfhm.com/images/clipart-110-scale-2.gif" />
    <img src="http://vignette4.wikia.nocookie.net/simpsons/images/6/69/The_simpsons_ralph_wiggum-1-.png/revision/latest?cb=20141124210636" />
</div>

Fiddle to play with: https://jsfiddle.net/npsquc6g/