I'm currently working on a school project and I seem to be encountering an issue with the positioning of the slider I created. Specifically, I am having trouble getting the bottom fixed position for it. The problem arises when scrolling the page, as the slider also moves along with it even after applying position:fixed in the CSS. (I hope I have explained the problem clearly) Any help or guidance on this matter would be greatly appreciated!
.carousel-container {
padding-top: 6%;
margin: auto;
overflow: hidden;
height: 720px;
width: 1080px;
transform: none;
}
.carousel-slide {
display: flex;
width: 100%;
height: 720px;
}
#prevButton {
position: fixed;
top: 50%;
z-index: 10;
left: 10%;
cursor: pointer;
}
#nextButton {
position: fixed;
top: 50%;
z-index: 10;
right: 10%;
cursor: pointer;
}<div class="Galleria">
<div class="carousel-container">
<div class="carousel-slide">
<img class="galleria" src="thumb-1920-672647.jpg" id="lastclone">
<img class="galleria" src="thumb-1920-672645.jpg">
<img class="galleria" src="thumb-1920-672643.jpg">
<img class="galleria" src="thumb-1920-672648.jpg">
<img class="galleria" src="thumb-1920-672647.jpg">
<img class="galleria" src="thumb-1920-672645.jpg" id="firstclone">
</div>
<input id="nextButton" type="image" name="Name of image button" src="Icone\SliderNext.svg" alt="PrevButton">
<input id="prevButton" type="image" name="Name of image button" src="Icone\SliderPrevious.svg" alt="NextButton">
</div>
<hr style="width:50%; position:relative; margin:auto; margin-top:5%; border-color:#000000;">
</div>