jQuery on scroll z-index issue with position:fixed

[lambada]

I'm working on layout where parent div has 100% width & height of window size.It's child div has fixed dimension say : 400px with overflow : auto as I want to show scrollbar.This child div has one element to which I want add position : fixed on scroll event.My problem is whenever I add position : fixed to one of the element inside child div using jQuery scroll event, It pops-out of child div even being child div has higher z-index & overflow : autoHere is working Code & Fiddle What is the issue here ? What needs to be fixed ?? Html \[code\]<div id="wrapper"> <div id="content"> <p id="head">Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> </div></div>\[/code\]CSS\[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\]JS\[code\]$("#content").scroll(function() { if( $(this).scrollTop() > 0) { $('#head').addClass('fixed'); } else { $('#head').removeClass('fixed'); } });\[/code\]