How to set buttons on the edges of a div? - css

Question

I have a weird problem, I am pretty bad with CSS therefor I come up with this exercise where I want to build a image slider, which is inside a div called slider-div with width of 1000px, from a array, 10 images are loaded into the div and only 5 are visible so the user have to scroll.
To learn more I added two buttons which should scroll 100px (left or right),
I have a problem with those buttons, they stick to the parent slider-div / Background. I hoped they would always stay on the top and don't move. User can decide to scroll to the end or hit the buttons.
I am using display: flex; flex-direction: row; to get the images into a row.
How can I fix button to the visible edge of a div?
Only solution I worked out is:
position: fixed;
right: 33.6%;
but it is very unprofessional :( also bad when I changing the layout somewhere else.
Can you please look over and tell me where the mistake is what is missing?
Here is the link to codepen:
https://codepen.io/miomate/pen/pBQBya
Code:
.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;
}
The images aren't loaded but the result ist the same.
Thank you very much.

Answer 1

This is my solution using the "bottom" property of 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;
}