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

【问题标题】：How do I overlap two images in one DIV?如何在一个 DIV 中重叠两个图像？
【发布时间】：2018-01-20 22:51:30
【问题描述】：

如何在一个 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/

【问题讨论】：

标签： html image css block overlap

【解决方案1】：

对于这种行为，container 元素应该是 relative 并且子元素必须是 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/

【讨论】：

【解决方案2】：

#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 */
}

【讨论】：