我想将 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>
最佳答案
我包含了一个片段,这样您就可以了解使用绝对值时发生了什么。它基本上是将它下面的元素向上推到它的位置。
<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 - 将图像相对/绝对放置在彼此之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50439467/