影子没有出现答案

【问题标题】：Shadow not showing up影子没有出现
【发布时间】：2012-11-26 04:23:06
【问题描述】：

我试图在其中一个 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/

【问题讨论】：

链接已损坏。您应该将相关的 html 添加到您的问题中。

标签： shadow css

【解决方案1】：

看不到阴影的原因是下一个 div (#one) 就在它的正下方，而阴影在 #one 下方呈现。从#one 中删除背景图像，阴影变得可见。

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

position: relative;
z-index: 10;

如果您希望阴影在其他文本区域上可见，您还需要调整其 z-index 值，顶部元素 (#intro) 具有最高值。

【讨论】：

太棒了！谢谢你的回答！
position: relative 为我做了。
没有想到 z-index。谢谢！
优秀。我不需要给出 z-index，相对位置有效！谢谢！我花了一个小时试图找出问题所在。

【解决方案2】：

我今天遇到的另一个场景。尽管设置了相对于 div 的位置，但盒子阴影没有出现。显然，这个 div 旁边没有包含框阴影的内容。

添加内容后，box-shadow 就会出现。

【讨论】：