Приветствую дорогие пользователи данной платформы! Подскажите пожалуйста какие есть более правильные способы расположения кнопки в слайдере?
Дополнение: Проблема заключается в том что при изменении размеров окна/девайсов, она съезжает в другое место.
.carousel-inner {
max-height: 470px;
}
.carousel-button {
position: absolute;
top: 250px;
left: 250px;
/* bottom: 0; */
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 5px 10px 5px;
color: #fff;
text-align: center;
background-color: #292929;
border: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="slider container-fluid p-0 h-75">
<div id="carouselExampleControls" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://i.ibb.co/X301YK2/slider.jpg" class="d-block w-100" alt="knipping85">
<button class="carousel-button">Подробнее о продукте</button>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<button>
лучше использовать<a>