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.
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)