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 extend outside of the parent when it needs to, but it is being cropped, since the parent has overflow: auto.

I realize that this is the correct behavior, but I am not sure how to achieve what I want. Here is some example HTML that illustrates the problem:

<div style="position: relative; height: 100px; width: 100px; background: red; overflow: auto;">
 <div style="position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; background: green;"/>
</div>

Any ideas?

EDIT: I should clarify that I need overflow: auto; the real code involves the outer div that may have more content that can fit in it, so I want scroll bars to appear when necessary.

The drop-down div is contextually relevant to the other content in the overflow: auto div, so it makes sense to keep them together. I suppose I could use javascript to move the drop-down div to another part of the DOM, but I'd rather not do that if I can avoid it.

Answer 1

I am not sure how to achieve what I want.

Neither am I — more info on what you want?

Perhaps it would be a good idea to separate the element with overflow from the element with ‘position: relative’, especially if that's only being used to locate the absolute inside.

<div style="position: relative;">
    <div style="height: 100px; width: 100px; background: red; overflow: auto;">...</div>
    <div style="position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; background: green;">...</div>
</div>

Answer 2

Try using overflow: visible; instead.

Answer 3

Just remove the overflow: auto part and close the inner div correctly with a closing tag, that way it works in IE6, IE7, Firefox 3 and Opera => probably all browsers.

Answer 4

Given your specifications, this is the best I could came up with:

<div style="position: relative; height: 100px; width: 100px; background: red;">
    <div style="height: 100px; width: 100px; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div style="position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; background: green;"></div>
</div>

There you have your div with overflow: auto; so scroll bars will appear if needed, and the drop-down div will look like it's extending "outside it's parent". Both are kept together under the same parent div, as you stated that they were contextually relevant to each other.

Answer 5

I'd say the fact that it's context sensitive is what's causing you problems. Perhaps you could restructure how that is set up? I'd have a parent div class that provides the context to these two, and have them separated from each other inside this div (using relative positioning to align them as you want?)

My 2c

Answer 6

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)

<div style="position:relative;border:1px solid blue;">
<div style="height: 100px; width: 100px; background: red; overflow: auto;">
 if there is some really long content here, it will cause overflow, but the green box will not
    <div style="position:absolute; z-index:-1; left: 20px; top:0; height: 200px; width: 200px; background: green;"/>
</div>

-Jerod

Answer 7

You use absolute positioning of inner div to position it relative to the outer div, but you do not want its content to count as outer div content. To achieve that, you need to separate inner div position from inner div content. You can try to do that by putting contents into fixed div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head> <title>Test</title> </head>

<body>

<div style="position: relative; height: 100px; width: 100px; background: red; overflow: auto;">
        <div style="position: absolute; top: 20px; left: 20px; height: 10px; width: 10px;">
            <div style="position: fixed; height: 100px; width: 100px; background: green;"></div>
        </div>
</div>

</body>
</html>

The trick is that fixed div w/o top/bottom/left/right specified will position itself at its "static" position, which seems to be what you need.

You may have problems with z-order, but, from your explanation, you do want your "menu" to be above everything else. (I assume that it comes and goes). You will sure have problems printing the page - if there is more than one page, fixed element repeats itself.

As jvenema pointed out, this won't work in IE6. :(

Answer 8

That's unpossible. Soon as you define overflow:auto on the parent DIV, that totally locks out any child DIV from breaking out of the confines.

You could try and fiddle with z-index values, but that may cause you to go blind in the left eye.

An idea would be to wrap the parent DIV with another DIV so that the DIV you want to pop out will be positioned according to the grandparent DIV. But that way will give you carpal tunnel and won't work either because you would have to know where in the flow of the parent DIV you want the child DIV to be.