Question

我认为这个问题与Link not working inside floated 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%;
}

链接在div内部不起作用

1 个答案: