I need assistance placing buttons in specific positions above an image carousel using HTML and CSS code. Despite researching various resources, I am unable to resolve this issue. This is the HTML implementation:
<!-- Image where buttons should be placed -->
<div class="carousel-item">
<img src="<?= Vector_url[7][1] ?>" class="d-block w-100" alt="Nope">
<!-- Container for download buttons -->
<div class="container" id="fila1">
<div class="row" id="cajas1">
<a class="btn btn-primary col" href="<?= Vector_Survey[25][1] ?>" role="button" target="_blank" >MSN087</a>
<a class="btn btn-primary col" href="<?= Vector_Survey[26][1] ?>" role="button" target="_blank" >MSN089</a>
</div>
</div>
</div>
Below is my CSS styling:
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 90%;
max-width: 90%;
z-index:-1;
}
div {
padding: 0;
display: block;
margin: 10px auto 10px auto;
max-height: 100%;
max-width: 100%;
}
.container{
z-index:100;
}
.carousel-item{
z-index:-1;
background-size: cover;
}
/* Button Styling */
.btn {
color:black;
background-color:white;
border:white;
margin:10px;
padding:-10px;
text-decoration:underline;
font-weight:bold;
max-width:90px;
height:30px;
margin-right:22px;
z-index:1;
}
I'm unsure if there's an error in my code or if something is missing, as the buttons are appearing behind the image when I want them to be in front.
Thank you for your help!