如何在一个DIV中重叠两张图片？现有CSS代码未生效求解决方案

嘿，我来帮你搞定两张图片堆叠的问题！你之前的CSS没生效，是因为用错了定位方式哦～

问题原因 #

你给两张图片都用了position: relative;，但relative定位的元素不会脱离文档流，它们还是会按照原来的布局占据空间，所以两张图片没法重叠在一起，自然达不到堆叠的效果。

正确的解决方案 #

要实现图片堆叠，我们需要用position: absolute;让元素脱离文档流，同时给父容器设置position: relative;作为定位参照，这样图片就会相对于父容器来定位啦：

完整代码示例

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

#personImgDiv {
  position: relative;
  /* 可以给父容器设置宽高，匹配图片尺寸，避免容器塌陷 */
  width: 200px;
  height: 200px;
}

#scaleImg {
  position: absolute;
  top: 0;
  left: 0;
  /* 可选：设置z-index控制层级，数值小的在下面 */
  z-index: 1;
}

#personImg {
  position: absolute;
  top: 0;
  left: 0;
  /* 让人物图片显示在上方 */
  z-index: 2;
}

关键说明 #

• 父容器#personImgDiv设置position: relative;后，里面的绝对定位元素会以它为基准定位，而不是相对于整个页面。
• position: absolute;会让元素脱离文档流，所以两张图片可以完全重叠在同一个位置。
• z-index属性可以控制图片的层级，数值越大的元素显示在越上层，你可以根据需求调整这个值。

内容的提问来源于stack exchange，提问作者user7055375