Ссылки не работают внутри 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 на одной странице, работают очень хорошо, поэтому я не думаю, что это связано с другими, содержащими divs.

Я предполагаю, что из предыдущего вопроса было задано вопрос, что это связано с позиционированием, но я не могу заставить его работать.

Спасибо!

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