Menu
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.
533
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
Absolute Positioning You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.
If you position it as absolute , then you're positioning it relative to its closest ancestor which is fixed or relative ... Clearly, nothing can be absolute and relative at the same time. Either you want the element to position itself based on another ancestor's position or based on the page flow.
In position: relative , the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element.
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>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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
