How to make inner element with position:absolute override overflow:hidden of outer element?

Question

Here is my HTML structure:

<div id="outer" style="overflow: hidden;">
    <div id="otherStuff">
      some other stuff goes in here
    </div>
    <div id="wrapper" style="position: relative;">
        <div id="popup" style="position: absolute;">
        </div>
    </div>
</div>

I just want my #popup element to be overflow the #outer element, but now, it is just cut out by the #outer element. By the way, #popup element should be positioned based on #wrapper element rather than #outer element.

Answer 1

<div id="wrapper" style="position: relative;">

make it impossible to be shown.

if it's popup, why it should be in the "overflow:hidden" div? or why wrapper should be relative?

you can do something like this : http://jsfiddle.net/nn007/9FehL/

Answer 2

Sorry, but overflow: hidden is just that. There is no chance ever that you have an element that is located inside of it (considering the dom-structure) that will visually be displayed outside the borders of this element. Popups are usually best placed in the root level, at first or last element inside the body element