时间戳

首页 > 解决方案 > CSS - 将图像相对/绝对放置在彼此之上

css - CSS - 将图像相对/绝对放置在彼此之上

问题描述

我想将 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>

标签： cssimagepositionabsolute

解决方案

我包含了一个片段，因此您了解使用绝对值时发生的情况。它基本上是把它下面的物品推到它的位置上。

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

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

推荐阅读