CSS

image on top of image css

.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

How to Position One Image on Top of Another in HTML/CSS

//html
<div class="parent">
  <img class="image1" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" />
  <img class="image2" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" />
</div>

.parent {
  position: relative;
  top: 0;
  left: 0;
}
// css style

.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px solid #000000;
}

.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px solid #000000;
}