Thanks to SO: https://stackoverflow.com/questions/10471848/css-z-index-overflow-facebook-xfbml-and-safari
Turns out I needed positions and z-indexes, but also this on the containing <div>
, which uses a “clearfix” trick (instead of using overflow:hidden) to make #main wrap its floated children:
Original:
#main {
clear: both;
padding: 5px 0 0 0;
position: relative;
z-index:1;
overflow:hidden /*removed */
}
Added:
#main:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
zoom: 1;
}