css position question: layers with z-index?

hey guys, i have a probably rather simpel problem:

my website has two layers:

1) a drag&drop navigation on top which should be positioned absolute, so scrolling doesn't affect the bars.

2) a content area in the back behind the navigation which should be scrollable.

you can see what i mean right here: http://jsfiddle.net/Pghqv/

however now, i c开发者_StackOverflow中文版annot click links in my content-area in the back. any ideas or solutions how i can still have the same position result and the links in the back are working?

thank you very much.

In your demo the only reason you can't click the content behind the header is because it's behind the header #navigation div. If you move it from behind the header #navigation div, with, for example, margin-top: 200px; then it works: JS fiddle demo.

If the height of the #navigation div isn't known in advance, then the following jQuery can be used instead of a concrete css declaration in the stylesheet:

$('#page-wrap').css('margin-top',$('#navigation').outerHeight());

JS Fiddle demo.