Метод 1: использование свойства CSS positionи z-index
HTML:

<div class="slide-container">
  <div class="slide slide1">Slide 1</div>
  <div class="slide slide2">Slide 2</div>
</div>

CSS:

.slide-container {
  position: relative;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background-color: red;
  z-index: 1;
}
.slide2 {
  background-color: blue;
  z-index: 2;
}

Метод 2. Использование CSS flexbox
HTML:

<div class="slide-container">
  <div class="slide slide1">Slide 1</div>
  <div class="slide slide2">Slide 2</div>
</div>

CSS:

.slide-container {
  display: flex;
  flex-direction: column;
}
.slide {
  flex: 1;
}
.slide1 {
  background-color: red;
}
.slide2 {
  background-color: blue;
}

Метод 3. Использование JavaScript с классами CSS
HTML:

<div class="slide-container">
  <div class="slide slide1">Slide 1</div>
  <div class="slide slide2">Slide 2</div>
</div>

CSS:

.slide-container {
  position: relative;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease-in-out;
}
.slide1 {
  background-color: red;
}
.slide2 {
  background-color: blue;
  opacity: 0;
}
.slide.active {
  opacity: 1;
}

JavaScript:

const slides = document.querySelectorAll('.slide');
let currentIndex = 0;
function showSlide(index) {
  slides.forEach(slide => slide.classList.remove('active'));
  slides[index].classList.add('active');
}
// Example usage
showSlide(currentIndex); // Show the initial slide
// Change to the next slide after a delay
setTimeout(() => {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
}, 2000);

Это всего лишь несколько примеров того, как можно накладывать слайды друг на друга, используя разные методы. Вы можете дополнительно настроить стили и анимацию в соответствии со своими потребностями.