title: Overlaping shadow div on another
body: <p>I have 3 DIVs, first is the navigation, second is SHADOW of navigation and third is content, I want the SHADOW div to overlay/overlap on cotnent DIV, may be it will be done with z-index ? or position:fixed ? I tried so many things and now am lost, please check this and please help.. </p>
  
  <p><a href="http://jsfiddle.net/3nqay/" rel="nofollow">http://jsfiddle.net/3nqay/</a></p>
  
  <pre><code> &lt;div style="height:50px;background:green"&gt;this is navigation&lt;/div&gt;
   &lt;div id="shadow" style="height:30px; background: red url(IMAGE_PATH)"&gt;&lt;/div&gt;
   &lt;div id="content" style="background:blue; height:150px"&gt; this main main content&lt;/div&gt;
  </code></pre>
  
  <p>PS : after trying so many things, I removed all styles, this is the basic structure</p>