How to put the buttons above the image (HTML/CSS)

I would like to place some buttons with specific positions above an image within a carousel of images through a html/css code. I have taken a look at different posts but I can not solve my problem. This is my HTML code:

<!-- This is the image on which I want to put the buttons -->
      <div class="carousel-item">
       <img src="<?= Vector_url[7][1] ?>" class="d-block w-100" alt="Nope">

      <!-- Buttons container to download PDFs -->
       <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>

And this is my CSS code:

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;
              }
/* Buttons Style */
.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 don´t know if i have something wrong on my code or maybe i'm missing something but the buttons appear behind the image and i want the opposite.

Thanks you very much in advance!

Solution

You will need position: absolute or position: fixed or position: relative. You could add position: relative to your button's CSS properties to make it work the way you want.
By default, all elements have their position to be static. Elements with position of static do not respect z-index and z-index is ignored. This is why your z-index wasn't working.

EDIT: Found what's your problem. Give your image a property position: absolute. This should screw it's positioning up, but, your problem would be solved and you can use flexbox to align them properly again. Now your buttons are in over the image (if we see from third dimension). Check out this CodePen I created to work on this problem.