Em vez de percorrer a página para ver um monte de divs, eu gostaria que eles se sobreponham no mesmo lugar - um empilhado no topo do próximo - quando você rola. Então, você rolaria para baixo, mas a página não cairia. Em vez disso, a próxima div sobrepõe a primeira e assim por diante. Nao tenho certeza de como fazer isso? Aqui está o que eu tenho:

ATUALIZAR

.container {
    width:100%;
    height:100%;
    position:relative;

}

.container1 {
    display:block;
    position:fixed;
    margin-top:690px;
    width:100%;
    height:500px;
    z-index:1;
    background:#333;


  }

.container2 {
    display:block;
    position:absolute;
    margin-top:1190px;
    width:100%;
    height:500px;
    z-index:2;
    background:#F00;
}

<div class="container">

<div class="container1">
info
</div>

<div class="container2">
info
</div>
</div>

Esse ajuste está funcionando, mas o div inferior (container1) não é 500px, mas definido para o tamanho da tela. Tenho certeza que este é um simples ajuste no código, mas estou perplexo.

Obrigado por qualquer ajuda!