Need help putting button on top of carousel img - html

Question

My image in the carousel is currently covering my button. Any help on getting the button to sit on top of the image would be greatly appreciated.
carousel.component.html
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/myimg8.jpg" class="d-block w-100 myImg" alt="...">
<button type="button" class="btn btn-dark myButton">Dark</button>
</div>
<div class="carousel-item">
<img src="assets/myimg.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/myimg6.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
carouel.component.scss
.carousel-item{
position: relative;
}
.carousel-item button {
position: absolute;
}

Answer 1

Actually, your problem is not with the z-index property.
Replace
position: absolute;
with
position: relative;
and you'll see it again.
Now, once the relative value has been used, you can use one of the following properties : top, left, bottom and right.
If you want your button to sit on top of the image, a solution could be this :
.carousel-inner button {
position: relative;
top: -7em;
}