Javascript firewatch视差效果与上面的另一个div具有内容

我正在努力寻找一种方法来设置山脉的视差效果。。。在页面的顶部和div上显示网站的内容。我尝试过z指数和位置，但还没有达到

谢谢你的回复

<div id="parallax">
<img class="scene" data-modifier="30" src="https://s.electerious.com/parallaxscene/p0.png">
<img class="scene" data-modifier="18" src="https://s.electerious.com/parallaxscene/p1.png">
<img class="scene" data-modifier="12" src="https://s.electerious.com/parallaxscene/p2.png">
<img class="scene" data-modifier="8" src="https://s.electerious.com/parallaxscene/p3.png">
<img class="scene" data-modifier="6" src="https://s.electerious.com/parallaxscene/p4.png">
<img class="scene" data-modifier="0" src="https://s.electerious.com/parallaxscene/p6.png">
</div>
<div id="test">
    <font color="red">This is some text!asdfasd</font>
</div>

document.querySelectorAll('.scene').forEach((elem) => {

    const modifier = elem.getAttribute('data-modifier')

    basicScroll.create({
        elem: elem,
        from: 0,
        to: 519,
        direct: true,
        props: {
            '--translateY': {
                from: '0',
                to: `${ 10 * modifier }px`
            }
        }
    }).start()

})

body {
    height: 2000px;
    background: black;
}

.scene {
    position: absolute;
    width: 100%;
    transform: translateY(var(--translateY));
    will-change: transform;
}

这是一些文字！asdfasd
document.queryselectoral（'.scene'）.forEach（（elem）=>{
常量修饰符=elem.getAttribute（'data-modifier'））
basicScroll.create({
艾琳：艾琳，
起:0,，
致：519，
导演：是的，
道具：{
“--translateY”：{
从：“0”，
收件人：`${10*修饰符}px`
}
}
}).start（）
})
身体{
高度：2000px；
背景：黑色；
}
.现场{
位置：绝对位置；
宽度：100%；
转换：translateY（var（--translateY））；
改变：转变；
}

---

尝试将覆盖div设置为

位置：固定


编辑：
如果您想让测试div随山脉滚动，只需将其移动到视差
div
内，将其设置为与您希望滚动的图层相同的
数据修改器，并使用CSS对其进行定位

<div id="parallax">
<img class="scene" data-modifier="30" src="https://s.electerious.com/parallaxscene/p0.png">
<img class="scene" data-modifier="18" src="https://s.electerious.com/parallaxscene/p1.png">
<img class="scene" data-modifier="12" src="https://s.electerious.com/parallaxscene/p2.png">
<img class="scene" data-modifier="8" src="https://s.electerious.com/parallaxscene/p3.png">
<img class="scene" data-modifier="6" src="https://s.electerious.com/parallaxscene/p4.png">
<img class="scene" data-modifier="0" src="https://s.electerious.com/parallaxscene/p6.png">
<div id="test" class="scene" data-modifier="0">
    <font color="red">This is some text!asdfasd</font>
</div>
</div>

谢谢。也许我没有正确解释这个问题。我想做一些像：。带有视差和所有图层的标题，以及所有网站内容的下方。@JavierdelHoyo那么您不需要更多元素吗？您的测试div代表firewatch页面的哪一部分？我的文本div代表web的内容。例如，现在只需19.99美元，这正是我所要求的。但是为什么要在测试div下面的内容中添加更多div呢？。谢谢，很抱歉打扰你。
#test {
  position: relative;
  text-align: center;
  top: 50vh;
}