Question

I have a black navigation bar (bar) and a vertical white page (page).

The page is supposed to run from to to bottom and look like it just comes out from right under the bar. The bar has a drop shadow which should obviously be ‘on’ the page – like this:

The problem with this is that the page needs a z-index of -1 to look like this (both have a fixed or relative positioning) – and this means (at least in Chrome) that I can’t select or click anything on the page.

When I assign a z-index of 2 (bar being 10) it obviously doesn’t work anymore:

Yet at least I can click the page‘s elements.

How can I achive the correct look while still being able to click/select elements?

Answer 1

you could set box-shadow: inset (...) to page.
http://jsfiddle.net/seler/fP2Gx/

or: http://jsfiddle.net/seler/fP2Gx/12/