Question

I have an interesting content layout proposal but I’m having difficulty figuring out how it can work.
Inside the “content box” container, we want to be able to animate (using jQuery) elements being scrolled out of view, becoming hidden once they have touched the edge of the content box, almost as if the content box was a window.

This would be trivial if the Logo box above the content was attached to the content box (assuming elements are moving upward) and entirely opaque, because then its z-index could be set higher and elements that are animated towards it would slide under it. Obviously, right now the elements just fly out of the content box and are seen on top of everything.

Even if the Logo box was inside another div that was connected to the content box, it would need to have the same background image as the body in order to still appear transparent and hide the elements heading towards it trying to become hidden. This obviously can’t work because the image being used for the logo-containing div and the body wouldn’t line up.

So it seems as though what we’re looking to do isn’t feasible, but let’s hear what you have to suggest. We’re looking to use HTML5 + CSS3 for this project.

Answer 1

If the content box is set to overflow:hidden and position:relative any elements inside it should be hidden when outside the bounds of the box, even if they are absolutely positioned.

Here is a jsFiddle illustrating: http://jsfiddle.net/c8LHL/