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>    </div>

own 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

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>      </div>  </div>

Answer 2

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>