如何在一个DIV中重叠两个图像？

Question

如何在一个DIV中重叠两个图像？ 我有这两个图像，我想将其中一个堆叠在另一个之上

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

我以为这个CSS可以做到...

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


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

但事实并非如此。 以下是一个演示我的问题的小提琴- https://jsfiddle.net/vksLv6ew/

Answer 1

#personImgDiv {
    position: relative; /* this is the most important bit*/
}
#scaleImg {
    position: absolute;
    top: 0px;
    left: 0px;
}
#personImg {
    position: relative; /* only set this if you want this image to overlap the other, otherwise don't */
}

Answer 2

为此， 容器元素应该是相对的 ，子元素必须是absolute 。

即，儿童将相对于容器具有绝对的位置。 这是对应的样式：

 #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> 

小提琴玩： https : //jsfiddle.net/npsquc6g/