How can I get an absolutely-positioned div to extend outside its relativley-positioned parent, which has overflow: auto?

Question

I have a relatively -positioned div, which has overflow: auto set. Inside that, I have a div which acts as a sort of drop-down menu. I want the drop-down div to e

Answer 1

Your problem is the position:relative parent. Since you have that positioning on the element, the inner box will ALWAYS stay within the overflow (position:absolute is relative to the nearest positioned parent).

To avoid the issue, you can remove the "position:relative" from the outer div, and add a wrapper div with the "position:relative;". You'll have to then add the "top:0;" declaration to your inner div (you should always have that, actually).

The end result is one extra div, and it looks like this: (you can remove the "z-index:-1" style, I just added that so you can see the result better)

    

        if there is some really long content here, it will cause overflow, but the green box will not