Html 视差网站中的内容重叠

我试图建立一个视差滚动网站，但我遇到了一些麻烦。我所有的内容div都堆叠在一起，我不知道该怎么做才能让它们停止

HTML

jQuery

$(document).ready(function(){

//running scrollCheck()
scrollCheck();
$(window).scroll(function(){
    scrollCheck();      
});

function scrollCheck(){

    //initialize variables
    var pos = $(window).scrollTop(),    //position of the scroll bar in pixels
        q   = .5;                       //speed modifier

    //parallax
    $("#depth0").stop().animate({
        top: (-pos*1*q)+"px"
    });
    $("#depth1").stop().animate({
        top: (-pos*2*q)+"px"
    });
    $("#depth2").stop().animate({
        top: (-pos*3*q)+"px"
    });
    $("#depth3").stop().animate({
        top: (-pos*4*q)+"px"
    });

    //nav bar
    $("#nav").stop().animate({
        top: Math.max(Math.min(1000,1000-pos),0)+"px"
    });
}
});

---

这里是jsfiddle:

我只是想通过查看您给出的代码来回答这个问题（我还没有在我的系统上尝试过）。看看上面给出的CSS，我没有看到提到任何地方的Z-index

大多数情况下，此类重叠问题将由z索引解决

我建议你也试一下

---

Ref:

我尝试过使用z-index，但它似乎不起作用。我希望每个div在页面上比最后一个更靠下。

@font-face {
    font-family: 'capone_lightregular';
    src: url('caponelight-webfont.eot');
    src: url('caponelight-webfont.eot?#iefix') format('embedded-opentype'),
         url('caponelight-webfont.woff') format('woff'),
         url('caponelight-webfont.ttf') format('truetype'),
         url('caponelight-webfont.svg#capone_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{
    margin: 0px;
    padding: 0px;
    height: 7000px;
    background-color: #FDFDFD;
}
.parallax {
    position: fixed;
    height: 100%;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
#nav {
    position: fixed;
    text-align:center;
    width: 100%;
}
#nav a {
    text-decoration: none;
    text-align: center;
    padding-right: 4%;
    width: 100%;
    font-size: 55px;
    font-family: "Capone Light";
    color: #093;
    font-style: normal;
    text-transform: none;
}
#home {
    height: 500px;
    background-color: #FDFDFD;
}
#howto img {
    width: 100%;
}
#depth5 #benefits img {
    width: 100%;
}
#yourarea img {
    width: 100%;
}
#gogreen img {
    width: 100%;
}




#depth2 #yourarea p iframe {
    margin-right: 10%;
    margin-left: 10%;
}

#gogreen {
    margin-left: 0;
    width: 100%;
    display: block;
    height: 500px;
    border: 5px solid #090;
}
#yourarea {
    margin-left: 0;
    width: 100%;
    display: block;
    height: 500px;
    border: 5px solid #30C;
}
#howto {
    margin-left: 0;
    width: 100%;
    display: block;
    height: 500px;
    border: 5px solid #CF3;
}
#benefits {
    height: 500px;
    border: 5px solid #90F;
}

body {
    margin: 0;
    padding: 0;
    height: 7000;
}

$(document).ready(function(){

//running scrollCheck()
scrollCheck();
$(window).scroll(function(){
    scrollCheck();      
});

function scrollCheck(){

    //initialize variables
    var pos = $(window).scrollTop(),    //position of the scroll bar in pixels
        q   = .5;                       //speed modifier

    //parallax
    $("#depth0").stop().animate({
        top: (-pos*1*q)+"px"
    });
    $("#depth1").stop().animate({
        top: (-pos*2*q)+"px"
    });
    $("#depth2").stop().animate({
        top: (-pos*3*q)+"px"
    });
    $("#depth3").stop().animate({
        top: (-pos*4*q)+"px"
    });

    //nav bar
    $("#nav").stop().animate({
        top: Math.max(Math.min(1000,1000-pos),0)+"px"
    });
}
});