html - CSS:使 div 在另一个 div 上滑动(即，使用 div 作为背景)

Question

我有一个 div 作为页面背景，其他 div 显示在它上面。

然而，当用户滚动时，背景 div 也会滚动。我希望它在内容 div 滚动时得到修复。

这是我的实际代码:

#background {
    z-index: 1;
    width: 100%;
    height: 100vh;
    position: fixed;
}
#content {
    z-index: 99;
    position: absolute;
    top: 2em;
    padding: 1em 1em;
    width: 100%;
}

这能做到吗？谢谢

Answer 1

当使用 position: fixed 时，您还需要为元素的位置指定值。

A jsfiddle证明这一点:

HTML:

<div id="background"></div>
<div id="content">
    This is the content
</div>

CSS:

#background {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url(https://wallpaperscraft.com/image/metal_lines_stripes_light_shiny_silver_18401_1920x1080.jpg);
}
#content {
    z-index: 99;
    position: absolute;
    top: 2em;
    padding: 1em 1em;
    width: 100%;
    color: blue;
    font-size: 300%;
    height: 400%;
}