固定页脚隐藏上面的文本

Question

我正在构建一个网页，我需要页面末尾的页脚才能在页面中固定。即当我滚动保持在页面底部时。

CSS：

footer {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
}

但浏览器中的结果是错误的。页脚隐藏了上面的文字。

http://i.imgur.com/2lXt0Bi.png

我该如何显示？ ：

http://i.imgur.com/yY5RfE4.png

Answer 1

更改页脚的z-index。具有较大z-index的元素始终位于具有较低索引值的元素的前面。

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height:120px;
    z-index:10;
}

This和this在z-index和堆栈排序方面有很好的插图。 此外，在内容中添加一些填充以使其看起来很好。

干杯!!

Answer 2

将margin-botom添加到主要内容（显示文字的位置）可以解决此问题。 value的{​​{1}}与页脚的margin-bottom相同。

选中JSFiddle。

Answer 3

如果你想要一个粘性页脚，你需要给你的页脚特定的高度，然后使用这个高度作为你身体的填充底部。

例如：

body { padding-bottom: 120px; }

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height:120px;
}