title: css3 drop shadow under another div, z-index not working
body: <p>i'm trying to use a drop shadow to make it look like one div (the header) is "above" another. my problem is that the "middle" div is covering the drop shadow. i tried using z-index to put the header div about the middle div, but it's not working (the shadow is still being covered). when i put a break between the divs, i can see the shadow and therefore i know that part of the code is working properly. i have the following html code:</p>
  
  <pre><code>&lt;div id='portal_header_light'&gt;
  &lt;img src="Home.png" height="32px" \&gt;
  &lt;img src="Wrench.png" height="32px" \&gt;
  &lt;/div&gt;
  &lt;div id='middle'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and this css:</p>
  
  <pre><code>#portal_header_light {
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px; text-align:center;
      -moz-border-radius: 3px 3px 3px 3px;
      -webkit-border-radius: 3px 3px 3px 3px;
      padding: 0px 3px 0px 3px;
      background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff));
  
      -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
  
      z-index:5;
  }
  
  #middle{
      height:308px;
      background-color:white;
      z-index:-1;
  }
  </code></pre>
  
  <p>any ideas? thanks.</p>