css - CSS-彼此相对/绝对放置图像

我想在image1上方放置image2，在image3上方放置这两个image4的下方。我阅读的所有内容都建议：父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>

最佳答案

我包括一个代码段，因此您了解使用绝对值时的情况。它基本上是将其下面的项目向上推到其位置。

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

关于css - CSS-彼此相对/绝对放置图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50439467/