Fix an Element to a position within a parent scrollable Div

This should be rather simple but position: fixed and position absolute do not work!

code:

<div id="parent">
    <div id="jqueryUIProgressBar"&开发者_开发知识库gt;</div>
    <!-- dynamic content -->   
    <div></div>
    ... ... ...
    <div></div>
</div>

this div is about 300px in height, and the content inside is vertically scrollable. The progress bar appears at the top of the div when scrolled right to the top as expected.

But when scrolling down, I would still like the progress bar to appear at the top of the div!

When i scroll down the progress bar scrolls with the rest of the content!

I want it to stay where it is at the top!

ive tried:

#jQueryProgressBar {
    position: fixed
}

along with position:absolute, left:0, top:0, float:left ALL SORTS

Just some quick help please

You need to set position: fixed and then set top and left as well, like this: (untested, should work)

#jQueryProgressBar {
  position: fixed;
  top: 200px; /*change*/
  left: 100px; /*change*/
}