css伪类:: before :: after阴影没有在其他元素上播放

Question

我正在使用这里找到的c​​ss投影技术：

http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

它使用前后的psuedo类为阴影提供更多形状。问题是我无法将阴影显示在其他元素上。

这是jsfiddle：http://jsfiddle.net/S7dzj/6/

我尝试了不同z索引的div的各种相对定位。 我也尝试在 top div中移动header元素，没有帮助。 我还尝试将 top div移动到相对top: -5px以使其位于标题 div下方，但仍然没有阴影。

有没有办法实现这个目标？

Answer 1

1. z-index属性仅适用于非position: static的元素，因此您的.top类仅忽略该属性。

2. 您的.header和.top类都有相同的z-index，因此标题显示在顶部。

See the updated jsFiddle.我所做的就是将position: relative（在视觉上无法做任何事情）添加到.top并将其z-index更改为-2

Answer 2

如果您希望阴影重叠.top，请参阅animuson的回答。

如果没有，请参阅http://jsfiddle.net/S7dzj/8/

.drop-shadow{
    margin-bottom:10px;
}

如果你添加边距，你会看到阴影。