Slideshow with z-index parameter

I have a problem with the slideshow when I use "z-index" in CSS. Instead of showing one on top of the other, the photos appear one under the other. Without "z-index" it works fine.

function pp() {

  var t = document.getElementsByClassName("m");

  for (var i = 0; i < t.length; i++) {
    t[i].style.display = "none";
  }
  imageIndex++;
  if (imageIndex > t.length) {
    imageIndex = 1;
  }

  t[imageIndex - 1].style.display = "block";
  setTimeout(pp, 2000);
}

#m {
  width: 100px;
  height: 100px;
  position: relative;
}

#img1,
#img2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#img2 {
  z-index: 10;
  margin: 20px;
}

<div id="m">
    <div id="img1">
        <img src="https://picsum.photos/seed/picsum/200/200" />
    </div>
    <div id="img2">
        <img width="50px" height="50px" src="https://i.picsum.photos/id/933/200/200.jpg?hmac=OW5v0bUFqC97kOeYWLjXhU-5mkb6atERs7CrqdPlRfs"/>
     </div>
</div>
<div id="m">
    <div id="img1">
        <img src="https://i.picsum.photos/id/933/200/200.jpg?hmac=OW5v0bUFqC97kOeYWLjXhU-5mkb6atERs7CrqdPlRfs" />
    </div>
    <div id="img2">
        <img width="50px" height="50px" src="https://picsum.photos/seed/picsum/200/200"/>
    </div>
</div>

I have attached the code above, something like this.