title: Box-shadow over image?
body: <p>Fiddle: <a href="http://jsfiddle.net/G5FaQ/" rel="nofollow">http://jsfiddle.net/G5FaQ/</a></p>
  
  <p>I have an image contained in a div.  A div just next to said image has a box shadow.  I want the box-shadow of the div to overlap the image, so it looks like the image is a part of the div it is in, rather than appearing to hover strangely over it.  I tried z-index, as you'll see in the fiddle, but that seems to have failed.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;body&gt;
  
  &lt;nav id="navigation"&gt;
      &lt;img src="http://web.fildred.com/media/images/blank_logo.jpg" height="150px" width="250px" alt="logo"&gt;
  &lt;/nav&gt;
  
  &lt;div id="content_wrapper"&gt;
  &lt;!-- InstanceBeginEditable name="content" --&gt;
  &lt;section id="content"&gt;
      Content.
  &lt;/section&gt;
  &lt;!-- InstanceEndEditable --&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      background: #ffd288;    
  }
  
  /*Nav*/
  #navigation {
      width:100%;
      z-index: 10;
  }
  
  .logo {
      z-index: 1; 
  }
  
  /*Content Section*/
  #content {
      background: #393951;
      height: 2000px;
      z-index: 10;
      -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 20px rgba(0,0,0,.8);
              box-shadow: 0px 0px 20px rgba(0,0,0,.8);
  }
  </code></pre>