Question

我正在使用如下所述的粘性页脚：

我有一个带有链接的段落，我希望它位于页面底部，所以我把它放在.footer中。

问题是Firefox 3.5.2和Chrome中的链接无法点击，它位于.push后面。它确实可以在IE7和IE8中运行，但我想这并不多说。

我玩过Z-index，但这不起作用。顺便说一下，我需要位置：#page中的relative来定位div中的一些东西。

有没有办法在所有浏览器中点击.footer中的链接？

代码的相关部分：

CSS

html, body {
    height: 100%;
}
#page {
    width: 962px;
    text-align: left;
    min-height: 100%;
    /* sticky footer part */
    height: auto !important;
    height: 100%;
    margin: 0 auto -90px;
    /* end sticky footer */
    position: relative;
}
/* sticky footer part */
.push, .footer {
    height: 90px;
}
.push {
}
.footer {
    background: #181f18 url(../images/background-top.png) no-repeat center bottom;
}

HTML

<div id="page">
  <div id="wrapper">
    <div id="contents">bla bla</div>
  </div>
  <div id="footer">bla bla</div>
  <div class="push"></div>
</div>
<div class="footer">
    <p><a href="http://www.some-site.com/">Some Text</a></p>
</div>

Answer 1

解决了它，添加了一个位置：relative和z-indexes做到了：

.push, .footer {
    height: 90px;
    position: relative;
}
.push {
    z-index: 9000;
    position: relative;
}
.footer {
    background: #181f18 url(../images/background-top.png) no-repeat center bottom;
    z-index: 9999;
    position: relative;
}

Answer 2

我在webkit浏览器中遇到过类似的问题。设置z-index或position并没有解决问题，但在设置-webkit-transform：translate（0,0）之后;该按钮可再次单击。

Answer 3

如果我错了，请纠正我，但我认为你应该为z-index添加一个负值，将其推回以启用链接按钮。

这对我有用

.footer, .push {
    height: 4em;
    position: relative;
    width: 90%;
    margin: 0 auto;
    z-index: -9000;
}

粘贴页脚链接在Firefox和Chrome中无法点击

3 个答案: