Is it possible to have a popup div that 'breaks out' of an overflow:scroll or overflow:auto container?

Question

I have a scrollable area that contains popup menus. Conceptually, something like this:

<div style="overflow:auto; width:100px; height:100px">
  ... content here that's big enough to trigger scrollbars...
  <div>
    <a href="javascript:$('#popup').show()">Click here</a>
    <div style="position:relative">
      <div id="popup"
           style="display:none; position:absolute; width:150px; height:150px">
        ... more content. This div gets shown and hidden by jquery on click events.
      </div>
    </div>
  </div>
</div>

The problem is that when the popup menu pops up, it is also contained within the scrolling div, and doesn't show up outside the 100x100 pixel scrollable area no matter how high I make the z-index. I realize of course that in a sense that's exactly what I asked for when I told the outer div to be overflow:auto in the first place. But for my use case it isn't what I want - I want the popup menu to be "over the top" and able to extend outside the scrollable area, while still staying in the right place, which is to say, directly underneath the "Click here" link. Even though the "Click here" link can move around as the container is scrolled.

I also realize that there are some complicated workarounds I could employ, like putting the popup entirely outside the scrollable div and using javascript to position it. And then I'd need to react to scroll events to reposition it as the content is scrolled, etc. Quite apart from needing to write lots of code to re-implement what the "position:relative/position:absolute" gave me for free, that'd also require quite a bit of refactoring of my own code, so I'd rather avoid it.

I'm wondering if there's some simple trick I can apply to my inner div to tell it to disregard its container's "overflow" property, or, failing that, a handy jquery script that will implement the complicated stuff for me behind the scenes so I just need to call it to get the effect I'm after.

Answer 1

I'd say that it's not possible to do that without using JS to calculate the position of the link and then display the popup with a position:fixed..

The problem is that your popup is inside a div with overflow:auto and everything inside that div will affect the scroll, so to show the popup you'll need to take it outside that div, and the only way i know to do that is by using the position:fixed... (or maybe using position:absolute on the popup, and a wrapper div with position:relative that contains the text and the popups)

so i'll propose 3 solutions:

1. put the popup outside the div with scroll, and when the user clicks on the link, display the popup
2. calculate the exact position of the link (x,y) and display the popup using position:fixed and the coordinates
3. use a nice and always-easy-to-use "message box" (e.g. http://csscody.com/demo/wp-content/demo/popup/demo.htm) I know that this is not exactly what you wanted, but.. i ran out of ideas =D

I hope this helps