How to overlay multiple layers in html on top of each other?

Question

css

Hello! how to overlay multiple images on top of each other in html? There are 4 images with an alpha channel and the same size, so how can I combine them all into one? How it is better to implement it?

Answer 1

each div that you want to put on top of each other has a
position: relative property
and look towards the z-index, with it you can overlay pictures one on one. Just set the order.

Answer 2

<style>
  .img-wrap {
    position: relative;
  }
  .img-wrap img {
    position: absolute;
  }
</style>
<div class="img-wrap">
  <img src="Ссылка на картинку" alt="">
  <img src="Ссылка на картинку" alt="">
  <img src="Ссылка на картинку" alt="">
  <img src="Ссылка на картинку" alt="">
</div>