css - 屏幕底部的页脚，上下文应在其下方滚动

Question

一段时间以来，我一直在努力让它发挥作用，但我似乎找不到适合我的确切问题的答案。

我想要在屏幕底部有一个页脚(-图像)，向下滚动时它应该留在屏幕底部。这意味着页脚应该位于内容之上。

我已经尝试过几次，但每次我使用它时，页脚一开始都在屏幕底部，但当我开始滚动时，它与页面顶部的距离保持不变(意思是它在屏幕上向上滚动)。

有解决办法吗？

Answer 1

是的，使用 postion:fixed; 非常容易:

<footer>I Stay Fixed!</footer>  

页脚{
position:fixed; /*修复页脚使其无法滚动*/
bottom:0; /*将页脚固定在内容窗口的底部*/
z-index:999; /*将页脚放在所有其他具有较小 z-index 的元素之上*/
}

例如，请参见下面的代码:

footer{
    position:fixed;
    bottom:0;
    width:100%;
    height:40px;
    background:red;
    }
.content{
    height:1000px;
    background:green;
}

<div class="content">Content</div>
<footer>I Stay Fixed!</footer>  

JSFiddle Demo