CSS3 box-shadow没有深度

Question

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

图片：

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;  
   }

Answer 1

如果您希望阴影覆盖图像，则必须将z-index应用于包含图像的div。

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

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

请参阅fiddle。

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