title: CSS Box-Shadow div overlay
body: <p>I have a problem with a box-shadow, being obscured by another div.</p>
  
  <p>Here is my code:</p>
  
  <p>HTML-</p>
  
  <pre><code>&lt;div id="wrap"&gt;
          &lt;div id="header"&gt;
              &lt;div id="nav"&gt;&lt;/div&gt;
          &lt;/div&gt;  
          &lt;div id="main_content"&gt;&lt;/div&gt;
          &lt;div id="footer"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS-</p>
  
  <pre><code>body{
      margin:0;
  }
  #wrap{
      margin:0 auto;
  
      width:84%;
  }
  #header{    
      background-image:url(img/header_pattern.png);
      background-repeat:repeat;
  
      margin:0 auto;
  
      width:100%;
      height:170px;
  
      box-shadow:5px 5px 5px black;
      z-index:1;
  }
  #main_content{
      background-image:url(img/main_pattern.png);
      background-repeat:repeat;
  
      width:100%;
      min-height:700px;
      height:100%;
      z-index:2;
  
  }
  </code></pre>
  
  <p>Screenshot-</p>
  
  <p><a href="http://i.stack.imgur.com/TfDyi.png" rel="nofollow">http://i.stack.imgur.com/TfDyi.png</a></p>
  
  <p>How can I make it so that the shadow is not "stacked under" (on the z-axis), and hence obscured by, the <code>#main_content</code> div, but still inside my <code>#wrap</code>? </p>
  
  <p>Thanks.</p>
  
  <p>No, I don't just wan't to push the <code>#main_content</code> down.</p>