如何在carousel容器的顶部添加按钮，使其在carousel图像更改时保持不变？

<div class="carousel-container">
  <img src="image1.jpg" alt="Image 1" class="carousel-image">
  <button class="carousel-button">Button</button>
</div>

.carousel-container {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: 100%;
}

.carousel-button {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px;
  background-color: #ccc;
  color: #fff;
}

var carouselContainer = document.querySelector('.carousel-container');
var carouselImage = document.querySelector('.carousel-image');
var carouselButton = document.querySelector('.carousel-button');

carouselImage.addEventListener('change', function() {
  var containerRect = carouselContainer.getBoundingClientRect();
  var imageRect = carouselImage.getBoundingClientRect();
  var buttonRect = carouselButton.getBoundingClientRect();

  var buttonTop = buttonRect.top - containerRect.top;
  var buttonLeft = buttonRect.left - containerRect.left;

  carouselButton.style.top = buttonTop + 'px';
  carouselButton.style.left = buttonLeft + 'px';
});