En lugar de desplazarse hacia abajo en la página para ver un montón de divs, me gustaría que se superpongan en el mismo lugar, uno apilado encima del siguiente, cuando se desplaza. Entonces, se desplazaría hacia abajo, pero la página no bajaría. En cambio, el siguiente div se superpondría al primero y así sucesivamente y así sucesivamente. ¿No estás seguro de cómo hacer esto? Esto es lo que tengo:

ACTUALIZAR

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

Este ajuste está funcionando, pero el div inferior (container1) no es 500px, sino que se establece en el tamaño de la pantalla. Estoy seguro de que esto es un ajuste simple al código, pero estoy perplejo.

¡Gracias por cualquier ayuda!