I have a centered div on my webpage with overflow set to 'hidden' that I use as a window or frame for my content. Inside, I have a facebook 'send' button that, when clicked, opens a flyout dialog box for the user to enter a message to send with the URL. The problem is that the flyout gets clipped by the hidden overflow of the containing box.
I want to put the facebook button outside the container div in my markup to avoid the hidden overflow. But I also need to make sure that it's absolutely positioned to appear in the frame. What's the easiest way to do this?
CSS positioning for the content frame is (note the div below is centered on the page, but don't rely on that as it's not always the case):
position: fixed;
width: 500px;
height: 500px;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
I tried putting it in a separate div with the same positioning and overflow set to 'visible', but for some reason it doesn't work (even verified that the setting is applied in IE's dev toolbar)
