html - 图片链接失效

Question

在我的网页中，我使用以下代码设置了图像链接/ anchor :

<div class="bg_1">
        <div class="Absolute-Center">
            <span style="font-size: 50px; color: aqua">in short.</span><br />
            LIVE LIFE AT YOUR OWN PACE.<br /><br /><br /><br /><br /><br /><br />
            <a href="#home1"><img src="images/scrolldown.png" width="50" height="50" border="0" /></a>
        </div>
    </div>
    <div style="height: 100vh; background-color: black;" >
        <a name="home1"></a>
    </div>

但是，当我运行我的页面时，该图像似乎不可点击，也不会在您点击时带您到任何地方。有任何想法吗？如果它有什么不同，我使用的图像大部分是透明的。
编辑:
我已将问题缩小为由 z-index 引起。 “bg__1”的CSS代码如下:

.bg_1 {
    height: 100vh;
    position: relative;
    z-index: -1;
    background-position: center center;
    background-size: cover;
    background-image: url(http://31.media.tumblr.com/2c3a72acc53b1a78ef3b6c4986604cd2/tumblr_ni0jt8sKlY1sr6759o1_500.gif);
}

删除 z-index 行可以解决问题，但是我的布局需要 z-index。

Answer 1

这可能是因为 body 元素覆盖了您的链接。只需减少 body 元素的 z-index 属性即可。