How to put the button on the top of the image?

I am trying to put a button on a picture. I have tried doing z-index and all but it does not seem to work.

 <div class="landing-img">
      <img src="CartoonPalace.png" class="img-fluid" style="position:relative; z-index: -1;"  alt="">
      <a href="" class="btn btn-outline-primary" style="position: absolute; z-index: 1000;">Start Exploring</a>
  </div>

Solution

You need to specify the position of your absolute positioned element, for example, you could specify left: 0px. Note that I have changed the image url in order to make a functional demo, you should change it in your own code.

 <div class="landing-img" style="position:relative;">
      <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
      <a href="" class="btn btn-outline-primary" style="position: absolute; left: 0px;">Start Exploring</a>
  </div>