按钮拒绝停留在滚动的div中

<div class="scrollable-container">
  <button id="sticky-button">按钮</button>
  <!-- 其他内容 -->
</div>

.scrollable-container {
  height: 300px; /* 设置容器的高度 */
  overflow: auto; /* 启用滚动条 */
  position: relative; /* 设置容器为相对定位 */
}

#sticky-button {
  position: relative; /* 设置按钮为相对定位 */
}

var container = document.querySelector('.scrollable-container');
var button = document.getElementById('sticky-button');

container.addEventListener('scroll', function() {
  var containerRect = container.getBoundingClientRect();
  var buttonRect = button.getBoundingClientRect();

  if (buttonRect.top < containerRect.top || buttonRect.bottom > containerRect.bottom) {
    button.style.position = 'absolute'; /* 按钮超出容器范围，设置为绝对定位 */
  } else {
    button.style.position = 'relative'; /* 按钮在容器范围内，设置为相对定位 */
  }
});