title: Make a position:absolute div scroll normally within another scrollable div
body: <p>I have a fixed height scrollable <code>&lt;div id="overlay"&gt;</code> positioned over all the page elements using <code>position:fixed</code>. In the div I have elements higher than the fixed height, so the scrollbar appears. I also have a tooltip that I want to stay with a paragraph even if it is scrolled.</p>
  
  <p>That's what I want to happen here, but unfortunately neither of my solutions work properly:</p>
  
  <ol>
  <li><p>I add <code>position:absolute</code> to the tooltip and <code>position:relative</code> to <code>#overlay</code>(the tooltip's parent): <a href="http://jsfiddle.net/4qTke/" rel="nofollow">http://jsfiddle.net/4qTke/</a></p>
  
  <p>The tooltip scrolls as expected but it is not visible outside of <code>#overlay</code>.  </p></li>
  <li><p>I only add <code>position:absolute</code> to the tooltip: <a href="http://jsfiddle.net/Yp6Wf/" rel="nofollow">http://jsfiddle.net/Yp6Wf/</a></p>
  
  <p>The tooltip is visible outside of the parent <code>#overlay</code> but doesn't move when the div is scrolled.</p></li>
  </ol>
  
  <p>I want the tooltip to always be visible <em>AND</em> for it to move when scrolled.</p>