Overlay divs

Question

Instead of scrolling through the page to view a bunch of divs, I would like them to overlap the same place - one folded on top of the next - when scrolling. This way you scroll down, but the page does not go down. Instead, the next div will overlay the first, etc. Etc. Not sure how to do this? Here is what I have:

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> 

This setting works, but the bottom div (container1) is not 500 pixels, but set to the screen size. I'm sure this is a simple code setup, but I'm at a dead end.

Thanks for any help!

Answer 1

Here is a proof of concept that you need to test in browsers (but I'm sure that it will work everywhere) and is a little refined.

The idea is to use JavaScript to control the scroll position of the window and fix the corresponding content pane accordingly, creating the illusion that the new content overlaps it when scrolling to view it.

http://jsfiddle.net/amustill/wQQEM/

Answer 2

Use fixed position instead of absolute:

 .container1 { position: fixed; z-index: 1; } .container2 { position: fixed; z-index: 2; } 

Answer 3

To achieve the parallax effect using CSS, all you have to do is use the css background-attachement property and set it to fix, and also add a minimum height.

 .parallax { /* The image used */ background-image: url("img_parallax.jpg"); /* Set a specific height */ min-height: 500px; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } 

check out this link https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm