CSS - 将图像相对/绝对叠加

Question

我想将 image2 放在 image1 上，然后将 image4 放在 image3 上。我阅读的所有内容都建议：父 div 相对，子级在父级中是绝对的。但是所有四个图像都相互重叠。这最终会响应，所以我不想设置高度。我错过了什么？

<div style="position:relative;">
    <img src="images/image1.jpg" style="position: absolute; top:0; left:0;" />
    <img src="images/image2.jpg" style="position: absolute; top:0; left:0;" />
</div>
<div style="position:relative;">
    <img src="images/image3.jpg" style="position: absolute; top:0; left:0;" />
    <img src="images/image4.jpg" style="position: absolute; top:0; left:0;" />
</div>

Answer 1

我包含了一个 sn-p，因此您了解使用绝对值时发生的情况。它基本上是将它下面的项目推到它的位置。

  <div style="position:relative;">
    <div style="width:50px; height:100px; background:red;"></div>
    <div style="width:500px; height:100px; background:blue; position:absolute;"></div>
  </div>
  <div style="position:relative;">
    <div style="width:50px; height:100px; background:purple;"></div>
    <div style="width:50px; height:100px; background:yellow;"></div>
  </div>

这是一个工作演示 Codepen link

<div style="position:relative;">
    <img src="image1jpg" style="position: absolute; top:0; left:0;" />
    <img src="image2.jpg"  />
</div>
<div style="position:relative;">
    <img src="image3.jpg" style="position: absolute; top:0; left:0;" />
    <img src="image4.jpg" style="position: absolute; top:0; left:0;" />
</div>