Вместо того, чтобы прокручивать страницу вниз для просмотра группы элементов div, я бы хотел, чтобы они накладывались на одно и то же место - одно складывается сверху на другое - при прокрутке. Итак, вы прокрутите страницу вниз, но страница не опустится. Вместо этого следующий div будет перекрывать первый и так далее, и так далее. Не уверен, как это сделать? Вот что у меня есть:

UPDATE

.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>

Эта настройка работает, но нижний div (container1) имеет размер не 500px, а настроен на размер экрана. Я уверен, что это простая настройка кода, но я в тупике.

Спасибо за любую помощь!