问题
I have a fancybox modal window that loads a page of content (a form).
On each input of the form there is a click event that shows a help tip to the right of the input.
My question is this - how can I make an element 'breakout' from the fancybox and overlap the edge, so that it's the highest element in the z-index? I'd like the helptip to overlap the edge of the fancybox.
I've tried setting the help tip to z-index of 1,000,000 but it doesn't fix it. Is the fancybox script setting itself as the max z-index on the page?
回答1:
use firebug on firefox, or inspect the modal element in chrome to see it's css and look for the z-index for this fancybox modal window. Maybe it can help you solve the problem.
回答2:
On line 298 there is:
tmp.wrapInner('<div style="width:' + w + ';height:' + h + ';overflow: ' + (selectedOpts.scrolling == 'auto' ? 'auto' : (selectedOpts.scrolling == 'yes' ? 'scroll' : 'hidden')) + ';position:relative;"></div>');
you need to remove:
;overflow: ' + (selectedOpts.scrolling == 'auto' ? 'auto' : (selectedOpts.scrolling == 'yes' ? 'scroll' : 'hidden')) + '
so that this line will look like:
tmp.wrapInner('<div style="width:' + w + ';height:' + h + ';position:relative;"></div>');
and then remove in css on the fancybox content the overflow atrribute.
Now your tooltips will work like they should.
I know that the author of fancybox v1 made there an if statement that will trun overflow auto/hidden to scroll or not to scroll but he should make if around the whole overflow param because thats whats is causing problems with overlaping.
Sorry for my poor english, Im in a rush.
回答3:
I eventually found that another piece of script was messing with all the z-indexes on the page to try and work round the infamous IE7 z-index issue - a little bit of jiggery pokery and all is now ok.
Gotta love picking up legacy code!
来源：https://stackoverflow.com/questions/2108656/overlap-content-in-a-fancybox