css - 页脚作为视差

Question

我需要创建一个作为视差的页脚。它必须位于页面底部，当用户滚动到底部时，页脚会与内容重叠。

现在我知道我必须使用固定位置，但是页脚附加到 viewport 但我需要它留在页面底部。

这是我的:

<style>
main{
position:relative;
z-index:1
}

footer{
    position: fixed;
    line-height: 300px;
    text-align: center;
    width: 100%; height: 100%;
    background: #7dc6ff;
    top: 50px; left: 0px;
    z-index: 10;
}
</style>

<main>
Content of the page
</main>
<footer>
footer
</footer>

这是我需要的小图片。页脚位于底部，当滚动到底部时，页脚会与视差等内容重叠 https://ibb.co/yQS03Xb .

Answer 1

在页脚上使用 background-attachment: fixed; 属性