Question

我的页脚上的链接无效。链接不可移动或可点击。

对不起，我应该补充一点，页脚上的z-index设置为-999，以便它保留在主要内容之后。如果这是问题，是否有解决方法？

<footer>
    <ul>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="about.html">About EIC</a></li>            
    </ul>
</footer>

footer {
    position: fixed;
    width: 100%;
    height: 8em;
    background-color: e0e0e0;
    z-index: -999;
    overflow: hidden;
    bottom: 0px;
    padding-top: 2%;
}
footer li {
    display: inline;
    padding: 2em;
}
footer a:link {
    color: #000;
    text-decoration: none;
}
footer a:hover {
    color: #999;
}

View it on jsFiddle.

Answer 1

页脚上的z-index: -999会将其移到实际文档后面。所以这些链接不可点击或可以发布。

实际上，当使用firebug或firefox的开发人员工具的“Inspect Element”功能时，这种问题很容易引起注意。检查链接不会选择链接，而是选择您的文档 - 它会告诉您链接位于某个位置（已检查的元素而不是链接）。

Answer 2

删除z-index: -999声明。您的页脚位于可点击的页面区域后面。

Answer 3

上面的人说了什么，加上你错过了一个＃背景颜色。

http://jsfiddle.net/Vsvg2/8/

Answer 4

你应该删除：

html{
    height: 100%;
}

来自你的CSS。

修改

你仍然需要删除z-index：-999; 谢谢animuson纠正我。

我的页脚链接CSS样式不起作用

4 个答案: