如何让我的图片幻灯片留在标题后面？

<div class="slideshow-container">
  <h2>标题</h2>
  <img src="image1.jpg" alt="图片1" class="slide">
  <img src="image2.jpg" alt="图片2" class="slide">
  <img src="image3.jpg" alt="图片3" class="slide">
</div>

.slideshow-container {
  position: relative;
  width: 500px;
  height: 300px;
  background-color: #f2f2f2;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

h2 {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  z-index: 1;
}

var slides = document.getElementsByClassName("slide");
var currentSlide = 0;

function showSlide() {
  // 隐藏当前幻灯片
  slides[currentSlide].style.display = "none";
  
  // 切换到下一张幻灯片
  currentSlide = (currentSlide + 1) % slides.length;
  
  // 显示下一张幻灯片
  slides[currentSlide].style.display = "block";
}

// 每3秒切换一张幻灯片
setInterval(showSlide, 3000);