html - 为什么 box-shadow 被另一个 div 隐藏了？

Question

我试图在另一个 div 上添加一个框阴影，但它被剪掉了。为什么以及如何修复它？

HTML:

<div id="top">
    <div id="box">

    </div>
    <div id="banner">

    </div>
</div>

CSS:

#box {
    height:30px;
    box-shadow: 80px 70px 3px rgba(30, 76, 80, 1) , 
                0px -2px 3px rgba(240, 21, 21, 1), 
                2px 0px 3px rgba(38, 238, 0, 1),
                -2px 0px 3px rgba(158, 29, 243, 1);
}

#banner{
    height:40px;
    background-color:orange;
}

JSFiddle:http://jsfiddle.net/rQNg9/

结果应该在下一个 div 的顶部有阴影。

(我在 Windows 7 上运行 Chrome 28)

Answer 1

DOM 的顺序在方框“上方”自然有#banner，因此您可以添加:

position: relative;
z-index: 1;

到#box，它将工作为:http://jsfiddle.net/rQNg9/1/