CSS3类div重叠的长方体阴影

我试图通过css3实现这一效果：

HTML代码完全类似于

...
<header>
    ...
</header>

<div id="wrapper">
    ...
</div>
...

header {
    display: block;
    width: 900px;
    height: 230px;
    margin: 0 auto;
    border: 1px solid #211C18;
    ...
    box-shadow: 2px 4px 20px #005377;
    -moz-box-shadow: 2px 4px 20px #005377;
    -webkit-box-shadow: 2px 4px 20px #005377;
}

#wrapper {
    width: 820px;    
    margin: 0 auto;
    ...
    border-right: 1px solid #211C18;
    border-bottom: 1px solid #211C18;
    border-left: 1px solid #211C18;
    ...
    box-shadow: 2px 4px 20px #005377;
    -moz-box-shadow: 2px 4px 20px #005377;
    -webkit-box-shadow: 2px 4px 20px #005377;
}

为了获得期望的结果，我需要：

隐藏主div的顶部阴影（没有问题）

将头球底部阴影放在主div前面，而不是现在的后面

我已经读了很多关于盒子阴影的书，但我还没有找到一个真正让我满意的解决方案。。。 有什么想法吗？

这正是你想要的

它的工作方式是使用一个主

#wrap

元素，该元素将内容置于中心位置，并为绝对定位的

#main

元素创建一个坐标图。它之所以这样做是因为它的位置：相对CSS规则。您将得到以下标记：

<div id="wrap">
    <header></header>
    <div id="main"></div>
</div>

---

我只是有一些运气使用相对定位

比如说

第一个div有一个方框阴影和一个底边距。第二个div在阴影下向上滑动

#firstdiv {width: 960px; box-shadow: 5px 5px 5px #ccc; margin-bottom: 10px;}
#seconddiv {width: 960px; position: relative; top: -10px;}

---

这不是最好的解决方案，但对我来说很有效

将位置设置为“相对”将解决问题

非常感谢你，你的回答非常详细和有用。。。但是如果我有一个页脚，而#主高度不是固定的（它可以根据页面的内容改变很多），该怎么办？将绝对位置添加到布局将使其向上移动…如果您的

标题高度固定，则您只需交换CSS，将标题位置设置为绝对位置，并使其与相对
#main
位置重叠。哦。。。看起来问题在于包裹会折叠，因此它不会覆盖所有包含的div高度，就像在这个jsfiddle中一样[非常感谢Pat让我了解jsfiddle]，我过去在使用浮动时处理折叠的父对象，但在这种情况下，我不知道如何解决这个问题……这里有一个简化的版本，它既不使用绝对定位也不使用包装元素（您真正需要更改的唯一一件事是给
标题提供比
main
更高的
z-index
：
#firstdiv {width: 960px; box-shadow: 5px 5px 5px #ccc; margin-bottom: 10px;}
#seconddiv {width: 960px; position: relative; top: -10px;}