html - CSS3 box-shadow 没有深度

Question

我一直在尝试将 CSS 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.

见小提琴。

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