将所有按钮保留在图像滑块的底部

Question

我在我的网站上使用图像滑块。它工作得很好，除了当我调整网页大小时滑块底部的按钮（圆点）会向下移动。

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

.slider {
  width: 85%;
  height: 100%;
  border-radius: 10px;
  text-align: center;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.slides {
  width: 500%;
  display: flex;
}

.slides input {
  display: none;
}

.slide {
  width: 20%;
  transition: 2s;
}

.slide img {
  width: 100%;
  height: 100%;
}

.slide-manual {
  position: absolute;
  width: 100%;
  margin-top: -60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.manual-button {
  border: 2px solid #ffffff;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
  margin: 15px;
}

.manual-button:hover {
  background: #ffffff;
}

#radio-button1:checked~.one {
  margin-left: 0;
}

#radio-button2:checked~.one {
  margin-left: -20%;
}

#radio-button3:checked~.one {
  margin-left: -40%;
}

#radio-button4:checked~.one {
  margin-left: -60%;
}

#radio-button5:checked~.one {
  margin-left: -80%;
}

.slide-automatic {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 440px;
}

.slide-automatic div {
  border: 2px solid #ffffff;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
  margin: 15px;
}

#radio-button1:checked~.slide-automatic .auto-button1,
#radio-button2:checked~.slide-automatic .auto-button2,
#radio-button3:checked~.slide-automatic .auto-button3,
#radio-button4:checked~.slide-automatic .auto-button4,
#radio-button5:checked~.slide-automatic .auto-button5 {
  background: #ffffff;
}

<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-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>
  <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>

我的图像滑块上显示两组按钮（.slide-manual 和 .slide-automatic）。我尝试过添加和更改高度和宽度，还尝试将

position: absolute;

更改为

position: relative

。这些更改都没有解决问题。

我希望这些按钮能够叠加并粘贴在图像滑块的底部，无论屏幕尺寸如何。

任何有关我如何实现这一目标的建议将不胜感激。

Answer 1

我找到了解决此问题的方法，即尝试将按钮（圆点）保留在图像滑块的底部。

我改变了这个CSS：

.slide-automatic {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 440px;
}

对此：

.slide-automatic {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-left: 0%;
  margin-right: 0%;
  bottom:0;
  
}

即使重新缩放，按钮现在也卡在图像滑块的底部。