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を含む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%; 
}