Question

我想将image2放在image1上，并将image4放在image3上方。我读到的所有内容都建议：父div和亲子在父母中是绝对的。但是所有四张图像都是相互叠加的。这最终会得到回应，所以我不想设定高度。我错过了什么？

!important

Answer 1

我包含一个片段，所以你了解当你使用绝对时会发生什么。它基本上推动它下面的物品，直到它的位置。

＆＃13;

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

＆＃13;

这是一个有效的演示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 - 将图像相对/绝对地放在彼此之上

1 个答案: