CSS3盒子阴影没有深度

我一直在试图将CSS盒子阴影应用到标题div，但出于某种原因而不是深度获得盒子阴影，我得到的只是一条扁平线。我尝试了不同的颜色，但无济于事。有任何想法吗？CSS3盒子阴影没有深度

图片： enter image description here

HTML：

<div id="wrapper"> 
<div id="header-wrapper"> 
     <div id="header"> 
      ...... 
     </div> 
</div> 
<div id="slider-wrapper"> 
     <div id="slider"> 
     ..... 
     </div> 
</div> 
</div>

CSS：

div#wrapper { 
    position: relative; 
} 
div#header-wrapper { 
    z-index: 1; 
    height: 125px; 
    min-width: 100%; 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#f0f0f0)); 
    background-image: -webkit-linear-gradient(top, #ffffff, #f0f0f0); 
    background-image: -moz-linear-gradient(top, #ffffff, #f0f0f0); 
    background-image:  -ms-linear-gradient(top, #ffffff, #f0f0f0); 
    background-image:  -o-linear-gradient(top, #ffffff, #f0f0f0); 
    box-shadow: 0px 5px 5px 5px #c6c6c6; 
    } 
    div#slider-wrapper { 
    margin-top: 5px; 
    z-index: -1; 
    min-width: 100%; 
    background-color: #f6f6f6; 
    }

来源

2013-10-13 Andrew

看起来像是可能掩盖了影子的东西，导致只看到一点点它？ –

但是不应该z-index允许阴影越过滑块？ – Andrew

不会发布一个链接到实际问题，当它被解决时，该链接对于未来的访问者将是无用的。尝试隔离产生问题的代码，并将其发布在jsfiddle –

如果你想阴影摔倒的形象，你必须申请一个的z-index到包含图像的div。

您已拥有z-index属性，但这些属性仅适用于定位元素。

解决方法：将position:relative加到div#slider-wrapper。

请参阅fiddle。

编辑：官方参考号是here。它没有说为什么这个元素需要被定位。未定位元素也具有堆叠顺序。如果有人能指出我的文档描述为什么，我很想知道。

来源

2013-10-13 07:16:52

啊，现在我明白了。我必须阅读z-index，谢谢！ – Andrew

CSS3盒子阴影没有深度

回答

相关问题