Позиция абсолютного элемента: как сделать его отзывчивым

Question

Я делаю слайдер изображений с двумя клавишами со стрелками, проблема в том, когда я пытаюсь изменить свой порт просмотра на меньший. Слайдер изображения быстро меняет свой размер, а клавиши со стрелками - нет. Не знаю, как прикрепить их к слайдеру изображений и сделать их отзывчивыми. Я обнаружил эту проблему, когда переключился с монитора на мой компьютер с меньшим разрешением и исчезла клавиша со стрелкой вправо.

Вот пример моей борьбы. jsfiddle

<div class="container">
  <div class="slider"><img src="https://i.ytimg.com/vi/suIr-M1p8yU/maxresdefault.jpg" alt="">           </div>

  <div class="arrows index">
    <a href="#" class="left"><</a>
    <a href="#" class="right">></a>
  </div>
</div>



 .container{

  max-width:1100px;
  margin: 0 auto;
  width:100%;
  height: auto;
}
.slider{
  position:relative;
}

.slider img{
  position:absolute;
  width:100%;
  height:auto;
  left:0;
  top:0;
  object-fit:cover;
}

.arrows {
  font-size: 3.125em;
  position: relative;
  width: 100%;
}

.arrows .left {
  position: absolute;
  color: white;
  top: 8em;
  left: 0.4em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
}

.arrows .right {
  position: absolute;
  color: white;
  top: 8em;
  left: 20.2em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
}

Answer 1

Почему вы так высоко цените свойство left вашей правой стрелки? Это, вероятно, сработает, если вместо этого использовать правильное свойство:

.arrows .right {
  position: absolute;
  color: white;
  top: 8em;
  right: 0.4em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
}

Чтобы исправить вертикальное положение, вы должны удалить абсолютное положение вашего изображения. Делая это, ваш слайдер будет иметь ту же высоту, что и ваше изображение. Затем вы можете расположить стрелки полностью внутри ползунка (вам нужно изменить HTML), и он должен работать

Answer 2

Это потому, что вы даете стрелке вправо фиксированное левое пространство, я бы предложил, чем вместо left: 20.2em; сделай это right: 0.4emитоговым будет:

.arrows .right {
  position: absolute;
  color: white;
  top: 8em;
  right: 0.4em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
}

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

CSS будет:

.container{

  max-width:1100px;
  margin: 0 auto;
  width:100%;
  height: auto;
}
.slider{
  position:relative;
  border: 1px solid black;
}

.slider img{
  /* position:absolute;  this is updated*/ 
  width:100%;
  height:auto;
  left:0;
  top:0;
  object-fit:cover;
}

.arrows {
  font-size: 3.125em;
  position: relative;
  width: 100%;
}

.arrows .left {
  position: absolute;
  color: white;
  bottom: 1em; //this is updated
  left: 0.4em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
  transition: 0.3s linear;
}

.arrows .right {
  position: absolute;
  color: white;
  bottom: 1em;//this is updated
  right: 0.4em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
  transition: 0.3s linear;
}

и HTML будет:

<div class="slider"><img src="https://i.ytimg.com/vi/suIr-M1p8yU/maxresdefault.jpg" alt="">
      <div class="arrows index">
        <a href="#" class="left"></a>
        <a href="#" class="right"></a>
      </div>
</div>

этим вы сделаете кнопки как часть ползунка, а затем переместите их снизу вверх, вместо сверху вниз, чтобы исправить это за вас.