如何让Image Slider的按钮始终固定在底部不随窗口移动？

问题根源 #

你现在用固定像素的margin-top定位两组按钮，窗口缩放时滑块高度会跟着变化，固定值没法自适应这种变化，自然就会偏移。另外.slide-automatic嵌套在.slides（宽度500%的flex容器）里，定位逻辑也会受干扰。

修复方案 #

1. 调整HTML结构 #

把.slide-automatic从.slides里移出来，放到.slider容器内，和.slide-manual同级，确保它以.slider为定位基准：

<div class="slider">
  <div class="slides">
    <input type="radio" name="radio-button" id="radio-button1" />
    <input type="radio" name="radio-button" id="radio-button2" />
    <input type="radio" name="radio-button" id="radio-button3" />
    <input type="radio" name="radio-button" id="radio-button4" />
    <input type="radio" name="radio-button" id="radio-button5" />
    <div class="slide one">
      <img src="#" />
    </div>
    <div class="slide">
      <img src="#" />
    </div>
    <div class="slide">
      <img src="#" />
    </div>
    <div class="slide">
      <img src="#" />
    </div>
    <div class="slide">
      <img src="#" />
    </div>
  </div>
  <!-- 移动到此处，和手动按钮同级 -->
  <div class="slide-automatic">
    <div class="auto-button1"></div>
    <div class="auto-button2"></div>
    <div class="auto-button3"></div>
    <div class="auto-button4"></div>
    <div class="auto-button5"></div>
  </div>
  <div class="slide-manual">
    <label for="radio-button1" class="manual-button"></label>
    <label for="radio-button2" class="manual-button"></label>
    <label for="radio-button3" class="manual-button"></label>
    <label for="radio-button4" class="manual-button"></label>
    <label for="radio-button5" class="manual-button"></label>
  </div>
</div>

2. 重写CSS定位逻辑 #

删掉固定的margin-top，改用bottom属性绑定到滑块底部，同时给滑块加个最小高度避免按钮重叠：

.slider {
  width: 85%;
  min-height: 300px; /* 防止滑块过小时按钮挤在一起 */
  height: 100%;
  border-radius: 10px;
  text-align: center;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* 手动按钮定位：距离底部20px */
.slide-manual {
  position: absolute;
  width: 100%;
  bottom: 20px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0; /* 删掉原来的固定margin */
}

/* 自动按钮定位：距离底部60px，和手动按钮错开 */
.slide-automatic {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  bottom: 60px;
  left: 0;
  margin-top: 0; /* 删掉原来的固定margin */
}

3. 修正JS循环逻辑 #

你的JS里循环到counter>4就重置，但HTML里有5个单选按钮，得改成counter>5才能覆盖所有滑块：

var counter = 1
setInterval(function() {
  document.getElementById("radio-button" + counter).checked = true
  counter++
  if (counter > 5) {
    counter = 1
  }
}, 5000)

核心逻辑 #

利用.slider的position: relative，让绝对定位的按钮以滑块为基准，通过bottom固定距离底部的位置，不管窗口怎么缩放，按钮都会牢牢贴在滑块底部。调整结构后，自动按钮也不会再受.slides的宽高干扰。

内容的提问来源于stack exchange，提问作者Richard