CSS Layers, reveal last section when scrolling

CSS Layers, reveal last section when scrolling

I've been seeing a really cool effect recently in the web world. It's the
'layered look'. A user will scroll down the page and the last section will
come out under the first few sections of the page. Sometimes it's with an
image, but I've found that content can be displayed like this as well.
Now, I'm well familiar with z-index and CSS positioning.
However, I can't seem to get the right combination to make it work the way
I would like.
HTML:
<div id="main">Content content content content content content</div>
<div id="revealed-section"></div>
So #main would appear as if it's on top of #revealed-section, and once the
user scrolls down to a certain point #reveal-section slides out.
I've done many searches, but I don't know the term for this technique.
Any ideas? I'd prefer a CSS only solution.