链接在div内部不起作用

Question

我认为这个问题与Link不在浮动div中工作有关,但我仍然无法弄明白.

我有一个div如下:

.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>

不同的图像使用CSS媒体查询以不同的大小显示/隐藏.整个事情是一个全宽的图像,在图像的顶部有一个文本标题和"按钮"(实际上只是一个看起来像一个按钮的链接).

无论我在div中放置什么链接都不起作用 - 文本显示在页面上,但是如果你将鼠标移开则没有任何反应.

为什么？!

紧接在同一页面上div之外的链接工作得很好,所以我认为这与其他包含div的东西无关.

我从上一个问题开始假设它与定位有关,但我不能让它起作用.

谢谢!

Answer 1

如果你-1投入z-index,它就会落后body.所以整体div.fullwidthimage变得无法点击或无法进入.所以,z-index: 1以出发点为出发点.

.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%;
}