阴影没有出现

Question

我正试图在其中一个div中放置阴影并且它没有显示出来。这是我试图实现阴影的一个div：

#intro {
    padding: 0px;
    margin: 0px auto;
    width: 100%;
    float:inherit;
    overflow: hidden;
    height: 800px;
    position:inherit;
    background-color: #00b3e1;; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

以下是网址：http://rachelchaikof.com/awareness/

Answer 1

你无法看到阴影的原因是因为下一个div（#one）正好位于它下方，而阴影正在#one下面呈现。从#one中删除背景图像，阴影变为可见。

将此添加到#intro的CSS中以使阴影可见：

position: relative;
z-index: 10;

如果你想在其他文本区域看到阴影，你也需要调整它们的z-index值，顶部元素（#intro）具有最高值。

Answer 2

我今天遇到的另一种情况。尽管相对于div设置了位置，但是盒子阴影并没有显示出来。显然，这个有盒子阴影的div旁边没有任何内容。

添加内容后，会出现框阴影。