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>

Вот рабочая демоверсия Кодовая ссылка

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