css - 箱形阴影分层

Question

好的，所以当我意识到这一点时，我正在弄乱盒子阴影

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

导航栏被阴影覆盖，我试图在代码中将内容 ID 设置得越来越高，但它不会进入导航下方。如果不可能，有人可以帮我在除顶部之外的所有侧面制作阴影吗？

我用于阴影的代码如下。

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

网页链接：这里

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)）可能会更好。

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