html 盒子重叠,CSS3 box-shadow用于重叠的div

这个

jsfiddle做你想要的

它的工作方式是使用一个主#wrap元素，以内容为中心，并为绝对定位的#main元素创建一个坐标图。这是因为它的位置：相对CSS规则。你最终得到以下标记：

然后将标题放置在该位置和给定位置内：relative和z-index将其堆叠到#main容器上方。

最后，#main绝对位于标题下方。 CSS看起来像这样：

/* centre content and create coordinate map for absolutely positioned #main */

#wrap {

width: 300px;

margin: 20px auto;

position: relative;

}

header, #main {

background: #fff;

/* rounded corners */

border: 1px solid #211C18;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

/* dropshadows */

box-shadow: 2px 4px 20px #005377;

-moz-box-shadow: 2px 4px 20px #005377;

-webkit-box-shadow: 2px 4px 20px #005377;

}

header {

display: block;

width: 300px;

height: 50px;

/* stack above the #main container */

position: relative;

z-index: 2;

}

#main {

width: 200px;

height: 70px;

/* stack below the header and underlap it...if that's even a word */

position: absolute;

z-index: 1;

top: 40px;

left: 50px;

}