如何让一个 HTML 图像与另一个图像重叠

Question

<div class="mainRunner">
    <img src="../App_Themes/Default/images/a.gif" />
    <img src="../App_Themes/Default/images/b.gif" />
</div>

我希望 b.gif 与 a.gif 重叠而不是换行 - 我该如何实现？

原文由 zomb 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您将不得不使用定位和 z-index 来让它工作，将图像更改为块级元素并添加一个类：

 .mainRunner {
  border: 1px solid #000;
}

.img1 {
  border: 1px solid #f00;
  position: relative;
  z-index: 2;
}

.img2 {
  border: 1px solid #0f0;
  position: relative;
  z-index: 1;
  top: -12px;
  left: -12px;
}

 <div class="mainRunner">
  <img class="img1" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
  <img class="img2" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
</div>

原文由 Kyle 发布，翻译遵循 CC BY-SA 4.0 许可协议