title: z-index issue with fixed and relative div's in a container
body: <p>I am facing an issue with z-index my layout draft form is here : <a href="http://jsfiddle.net/arunvavara/6hRdF/4/" rel="nofollow">jsfiddle</a></p>
  
  <p>I am trying to achieve the following </p>
  
  <ol>
  <li><p>The <code>#topBar</code> , <code>#Navigations</code> , <code>#infobar</code> needs to be fixed always.(achieved)</p></li>
  <li><p>Z-index of the <code>#mainMenu</code> . Needs to be between <code>#contentBorder</code> and <code>#content</code>(has a shadow).</p></li>
  <li><p>Z-index of the <code>#categorys</code>. Needs to be top of the <code>#contentBordera</code> and <code>#content</code>.</p></li>
  </ol>
  
  <p>any help will be highly appreciated.</p>