firewatch Parallax effect with another div above with content

I'm struggling to find a way to set the parallax effect with the mountains... on the top of the page and the div with the content of the website below it. I have tried with z-index and position but I haven't reached it.

Thanks for your replies.

<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;
}

https://jsfiddle.net/ufcqw2xh/