如何在div的边缘设置按钮？

Question

我有一个奇怪的问题，我是相当糟糕的CSS，因此我想出了这个练习，我想要建立一个图像滑块，这是在一个名为滑块的div中的宽度为1000px的div，从一个数组，10个图像加载到div中，只有5个可见，所以用户必须滚动。

为了了解更多，我添加了两个按钮，这两个按钮应该滚动100px (左或右)，我有一个问题，他们粘在父滑块-div/背景。我希望他们永远保持在顶端，不要移动。用户可以决定滚动到结尾或点击按钮。我使用display: flex；flex-direction: row；将图像放入一行。

如何将按钮固定到div的可见边缘？

我想出的唯一解决方案是:位置:固定；正确: 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

这是我使用css的"bottom“属性的解决方案。

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