Как установить кнопки по краям div?

Question

У меня странная проблема, я довольно плохо разбираюсь с CSS, поэтому я пришел к этому упражнению, в котором я хочу создать слайдер изображений, который находится внутри div, называемого slider-div, шириной 1000 пикселей, из массива 10. изображения загружаются в div и только 5 видны, поэтому пользователь должен прокручивать.

Чтобы узнать больше, я добавил две кнопки, которые должны прокрутить 100px (влево или вправо), У меня проблема с этими кнопками, они придерживаются родительского слайдера div / Background. Я надеялся, что они всегда будут оставаться на вершине и не будут двигаться. Пользователь может решить прокрутить до конца или нажать кнопки. Я использую дисплей: Flex; flex-direction: row; чтобы получить изображения в ряд.

Как я могу прикрепить кнопку к видимому краю элемента?

Единственное решение, которое я разработал, это: положение: фиксированное; справа: 33,6%; но это очень непрофессионально :( тоже плохо, когда я меняю раскладку где-то еще. Можете ли вы посмотреть и сказать мне, где ошибка, чего не хватает? Вот ссылка на codepen:

https://codepen.io/miomate/pen/pBQBya

Код:

.div-1 {
  max-width: 1000px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  position: absolute;
}

button{
  /* position: absolute; */
  top:35%;
}

.images {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

.x {
  position: absolute;
  top: 30%;
}
.div-2-1{

}
.div-2-2{
right: 0;
}

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

Answer 1

Это мое решение, использующее свойство "bottom" в css.

body {margin: 0 0 0 0;}
.div-1 {
  max-width: 1000px;
  height: 300px;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
}

.images {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

.x {
  position: absolute;
  bottom: 0;
}
.div-2-1{
  left:0;
}
.div-2-2{
 right: 0;
}