title: jQuery on scroll z-index issue with position:fixed
body: <p>I'm working on layout where parent div has 100% width &amp; height of window size.</p>
  
  <p>It's child div has fixed dimension say : 400px with overflow : auto as I want to show scrollbar.</p>
  
  <p>This child div has one element to which I want add position : fixed on scroll event.</p>
  
  <p>My problem is whenever I add position : fixed to one of the element inside child div using jQuery </p>
  
  <p>scroll event, It pops-out of child div even being child div has higher z-index &amp; overflow : auto</p>
  
  <p>Here is working <a href="http://jsfiddle.net/nWH3S/1/" rel="nofollow">Code &amp; Fiddle</a>  </p>
  
  <p>What is the issue here ? What needs to be fixed ?? </p>
  
  <p>Html </p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="content"&gt;
          &lt;p id="head"&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body, html {
      height: 100%
  }
  #wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      background: #bbb;
      z-index: 999
  }
  #content {
      position: relative;
      width: 400px;
      height: 400px;
      overflow: auto;
      background: #eee;
      z-index: 99
  }
  p {
      width: 100%;
      padding: 40px;
  }
  #head {
      background: green
  }
  .fixed {
      position: fixed;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$("#content").scroll(function() {
      if( $(this).scrollTop() &gt; 0) {
          $('#head').addClass('fixed');
      } else {
          $('#head').removeClass('fixed');
      }         
  });
  </code></pre>