CSS3 box-shadow has no depth

Question

I've been trying to apply CSS box-shadow to a header div, but for some reason rather than getting a box shadow with depth, all I get is a flat line. I've tried different colors, but to no avail. Any ideas?

Image:

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

If you want the shadow to fall over the image, you have to apply a z-index to the div that contains the image.

You already have a z-index property, but those work only on positioned elements.

Solution: add position:relative to div#slider-wrapper.

See fiddle.

Edit: The official reference is here. It doesn't say why the element needs to be positioned though. Unpositioned elements have a stacking order too. If anybody can point me to a document describing the why, I'd love to know.