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

我包含了一个片段，这样您就可以了解使用绝对值时发生了什么。它基本上是将它下面的元素向上推到它的位置。

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