How to "float" an absolutely positioned element div out of its container - css

Question

Here's the (simplified) scenario. I have a div which contains another div. The outer div is of fixed size, has scrollbars and relative positioning. The inner div is larger than and is positioned relative to the outer div. I want the inner div to be fully visible, "floating" above the outer div.
I appreciate this sounds artificial as there is no point in constraining the size of the outer div in this way. It is. In the real application though, there is other content inside the outer div which does need to be controlled with scrollbars.
How can I do this, using css alone? Please note, the inner div must be positioned relative to the external one, so using position:fixed is not an option.
Markup:
<div id="container">
<div id="popup">Popup Text</div>
</div>
Css:
#container{
overflow: scroll;
height:50px;
width:50px;
position:relative;
}
#popup {
position:absolute;
top:20px;
border:1px solid #000;
height:100px;
width:100px;
}
Here's a Plunker

Answer 1

You can add extra wrapper and set position: relative and overflow to different wrappers:
HTML
<div id="base">
<div id="container">
<div id="popup">Popup Text</div>
</div>
</div>
CSS
#base {
height:50px;
width:50px;
position:relative;
}
#container{
overflow: scroll;
height:100%;
width:100%;
}
#popup {
position:absolute;
top:20px;
border:1px solid #000;
height:100px;
width:100px;
}
Fiddle: http://jsfiddle.net/UGftq/
The "secret" is that the overflow property
...affects the clipping of all of the element's content except any
descendant elements (and their respective content and descendants)
whose containing block is the viewport or an ancestor of the element.
The containing block for absolutely positioned elements is the nearest ascestor with non-static position. Therefore, when element with overflow is not positioned itself, it doesn't clip absolutely positioned descendants.