如何在另一个盒子上盒子阴影

Question

我正在尝试创建一个盒子阴影，但是一旦另一个盒子击中它，盒子阴影就不可见。我想让盒子阴影越过另一个盒子。

这里是出了问题的示例。如您所见，有一个没有盒子的阴影。

小提琴

html

<header>
</header>
<div id="content">
</div>

CSS

header {
height: 100px;
background: black;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.7);
}
#content {
width: 350px;
height: 300px;
margin: 0 auto;
background: #CCCCCC;
}

Answer 1

html元素默认位于文档正常流程中。

您必须将标头定位为relative并添加更高的z-index（如果需要），以将该元素放在其他元素的情况下，而无需更改布局，则如下：

header {
  height: 100px;
  background: black;
  box-shadow: 1px 1px 5px rgba(0,0,0, 0.7);
  position: relative;
  z-index: 10; /* optional */
}

工作演示。

Answer 2

尝试 position:absolute or relative for header

header {
    height: 100px;
    background: black;
    box-shadow: 1px 1px 5px rgba(0,0,0, 0.7);
    position:absolute;
    width:100%;
}
#content {
    width: 350px;
    height: 300px;
    margin: 0 auto;
    background: #CCCCCC;
}

jsfiddle