Make a position:absolute div scroll normally within another scrollable div

I have a fixed height scrollable <div id="overlay"> positioned over all the page elements using position:fixed. 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.

That's what I want to happen here, but unfortunately neither of my solutions work properly:

1. I add position:absolute to the tooltip and position:relative to #overlay(the tooltip's parent): http://j开发者_如何学JAVAsfiddle.net/4qTke/

   The tooltip scrolls as expected but it is not visible outside of #overlay.

2. I only add position:absolute to the tooltip: http://jsfiddle.net/Yp6Wf/

   The tooltip is visible outside of the parent #overlay but doesn't move when the div is scrolled.

I want the tooltip to always be visible AND for it to move when scrolled.

---

What you want is not possible using just CSS and HTML.

The main problem you have is that you have set overflow: scroll on the container your #tooltip is relative to. Because this overflow property is stopping any content from appearing outside of its edges when you position #tooltip "outside" of the div it will be hidden and only visible when scrolled to.

The reason it was visible in your second scenario is because without setting position:relative your #tooltip was relative to the page and not the container. Which meant it was not affected by the overflow:scroll property of the container.

---

HTML:

<div id="overlay">

    <div class="elemRel">

        <div class="elemAbs">

            <!-- Your Code -->

        </div>

    </div>

</div>

CSS:

#overlay { position:fixed; }
.elemRel { position:relative; }
.elemAbs { position:absolute; }

---

Maybe this is an alternative for you? See demo fiddle.