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元素在文档正常流程中静态定位。

您必须position标题为relative并添加更高z-index（如果需要）以将该元素置于其他元素的顶部而不更改布局，如下所示：< / p>

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

<强> WORKING DEMO

Answer 2

尝试position:absolute or relative标题

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

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

2 个答案: