将<div>'放在'投影</div>下

Question

我有一个黑色导航栏（bar）和一个垂直白页（page）。

page应该从下到下运行，看起来就像是从bar正下方出来的。 bar有一个投影，显然应该在page上“ - 就像这样：

问题在于page需要z-index -1 看起来像这样（两者都有固定或相对定位） - 这意味着（至少在Chrome中，我无法选择或点击page上的任何内容。

当我指定z-index 2 （bar 10 ）时，它显然不再有效：

但至少我可以点击page的元素。

如何在能够点击/选择元素的同时实现正确的外观？

Answer 1

您可以将box-shadow: inset (...)设为page http://jsfiddle.net/seler/fP2Gx/

或：http://jsfiddle.net/seler/fP2Gx/12/