盒子阴影分层

Question

好吧，当我意识到

时，我正在搞乱盒子阴影

http://i.stack.imgur.com/I3E9E.png（抱歉无法发布图片）

导航栏正在被阴影重叠，我试图将内容ID放在代码中更高和更低，它不会在导航下面。如果不可能，有人可以帮助我在所有方面制作阴影但是顶部？

我用于阴影的代码如下。

box-shadow:0px 0px 15px rgba(0, 0, 0, 0.5);

链接到网页：Here

Answer 1

将此添加到您的css：

#nav {
    position: relative;
    z-index: 1;
}

Answer 2

尝试使用z-index移动标题图层下方的内容框...

之后

box-shadow:0px 0px 15px rgba(0, 0, 0, 0.5);

把

z-index:2;

并且一定要添加

z-index:1;

到你的标题css ...

Answer 3

您可以将y轴定义为正数，然后它不应与标题重叠：

box-shadow:0px 5px 15px rgba(0,0,0,0.5);

当然，它在底部比在侧面稍微长一些，但是使盒子阴影更加微妙（如box-shadow:0px 5px 7px rgba(32,32,32,0.5)）可能会更好。

编辑： z-index（就像Lollero建议的那样）#nav可能比这更好。