Links not working inside div

Question

I think this question is related to Link not working inside floated div but I still can't figure it out.

I have a div as follows:

.fullwidthimage {
  width: 100%;
  position: relative;
  z-index: -1;
}
.imageoverlay {
  left: 0;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 15px;
  width: 100%;
}
#homepagebutton {
  position: absolute;
  text-align: center;
  z-index: 100;
  bottom: 50px;
  width: 200px;
  height: 60px;
  left: 50%;
  margin-left: -100px;
  font-size: 25px;
  border: 1px solid black;
  border-radius: 5px;
  background-color: orange;
  color: black;
  text-decoration: none;
}

<div class="fullwidthimage">
  <img class="noround imageundertext smallimg" src="http://placehold.it/600x800">
  <img class="noround imageundertext midimg" src="http://placehold.it/1000x1000">
  <img class="noround imageundertext bigimg" src="http://placehold.it/3200x1300">
  <img class="noround imageundertext xlimg" src="http://placehold.it/5000x1500">
  <h1 class="imageoverlay">Title Here</h1>
  <a href="#getstarted" id="homepagebutton">Get Started</a>
</div>

The different images are using a CSS media query to display/hide at different sizes. The whole thing is a full width image with a text title and 'button' (that's actually just a link styled to look like a button) over the top of the image.

Whatever links I put inside that div won't work - the text shows on the page, but nothing happens if you mouse over.

Why?!

Links placed immediately outside of the div on the same page work just fine, so I don't think it's anything to do with other containing divs there.

I'm assuming from that previous question asked that it's something to do with the positioning, but I can't make it work.

Thanks!

Answer 1

If you give a -1 in z-index, it goes behind body. So the whole div.fullwidthimage becomes unclickable or unaccessible. So, give z-index: 1 as the starting point.

.fullwidthimage {
  width: 100%;
  position: relative;
  z-index: 1;               /* Change this! */
}
.imageoverlay {
  left: 0;
  text-align: center;
  position: absolute;
  z-index: 2;               /* Increase this! */
  top: 15px;
  width: 100%;
}