title: Z-Index of child item higher than container DIV
body: <p>I have two block elements, a header, and a nav.  The header has a <code>div</code> inside of it that overflows above the nav.  I used <code>z-index</code> to define those items that way, but now I have <code>a</code> items <em>inside</em> of the nav that I'd like to be the most prodominent/highest element on the page, so to appear above the header and it's overflowing elements.  Is this possible?</p>
  
  <p>Please see example - <a href="http://jsfiddle.net/zAehr/" rel="nofollow">http://jsfiddle.net/zAehr/</a>  - I'd like the Nav <code>a</code> items to be above the blue <code>logo</code> class.</p>
  
  <p>My CSS:</p>
  
  <pre><code>#header {
   position:relative;
   display:block;
   height:100px;
   width:100%;
   overflow:visible;
   background:#eee;
   z-index:10;
  }
  
  .logo {
   position:relative;
   display:block;
   height:250px;
   width:250px;
   background:#336699;
   z-index:10;
  }
  
  #navbar {
   position:relative;
   width:100%;
   height:100px;
   background:#bbb;
   z-index:9;
  }
  
  #navbar a { 
   display:block;
   position:relative;
   padding:10px;
   z-index:100;
   float:left;
  }
  </code></pre>
  
  <p>Many thanks SO</p>