链接不在里面div

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

如果您在z-index中给出-1，则它将落后于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%; 
}