Why Image moves up in slideshow after running once HTML

I am currently trying to make a website home page with a slide show running in the middle using HTML,CSS and Javascript. I have completed the placement of the slide show but once the whole slide show runs(3 images) it moves up. Why is this happening and how could it fix it. Thanks for any help in advance. I have tried placing the images both inside of the html and outside and both ways it isn't working

<div5 class="slideshow-container">
<div5 class="mySlides fade">
<div5 class="numbertext"></div5>
<img src="picture1.jpg" style="width:50%">
<div5 class="text"></div5>
</div5>

<div5 class="mySlides fade">
<div5 class="numbertext"></div5>
<img src="picture2.jpg" style="width:50%">
<div5 class="text"></div5>
</div5>

<div5 class="mySlides fade">
<div5 class="numbertext"></div5>
<img src="picture3.jpg" style="width:50%">
<div5 class="text"></div5>
</div5>

 function showSlides() {
 var i;
 var slides = document.getElementsByClassName("mySlides");
 for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none"; 
 }
 slideIndex++;
 if (slideIndex> slides.length) {slideIndex = 1} 
 slides[slideIndex-1].style.display = "block"; 
 setTimeout(showSlides, 2000); // Change image every 2 seconds
 }

  div5 {
  width: 325px;
  style="position: absolute;
  top: 0px;
  left: 0px;
  }

  <div5 style="position: absolute; top:200px; left:500px"</div5>