Make text appear in front of an relatively positioned image

Question

I have an image that is position: relative and it is going over some text.

Is there a way to make the text appear in front of the image?

I tried messing with z-index but to no avail.

Here is my code

h2 {
  padding-top: 100px;
}

img {
  position: relative;
  top: -150px;
}

<h2>1715</h2>
    <div class="img-wrapper">
         <img src="http://cdn.xl.thumbs.canstockphoto.com/canstock24510515.jpg" >
    </div>
                

Answer 1

h2 {
  padding-top: 100px;
   z-index:1;
  position:relative;
}

img {
  position: relative;
  top: -200px;
  z-index:0;
}

<h2>1715</h2>
    <div class="img-wrapper">
         <img src="https://bootstrapbay.com/blog/wp-content/uploads/2014/05/unslpash-desert-road_uvsq5s.png" >
    </div>

posibble solution if you dont want to change the html structure.