I have a case where a 3rd party ad is bleeding through my modal window implementation. I'd like to up the z-index of the modal overlay as high as possible so the ad won't show on top of it. Is there a limit to z-index values? I'm sure if there is it varies by browser. Anyone know?
+6
A:
Not really, but you might consider the natural limitations of a system, like an int range. I'd probably keep it under 32,767. I've definitely exceeded that in javascript while working on a similar problem, and didn't encounter any problems on the major browsers and platforms that I was concerned about at the time.
In the case of 3rd party ads and overlays, making sure that wmode="transparent" on the flash embed is a common problem along the same lines. Also worth noting that IE has a bug with stacking z-indexes, so if you're not seeing success, make sure you're not hitting your head up against the wall with that one*.
I always like to keep to some kind of convention, and not use arbitrary figures. For example, maybe everything in my css falls between 0 and 10. Maybe dhtml stuff happens in the 100's place values, with a meaningful z-index for any given module.
*Sidenote: The IE bug, to be specific, is that IE considers a new instance of document flow to be a new stacking context for z-index. You need to make sure that your z-indexes aren't being lost in the DOM hierarchy when a child node that would normally be inheriting your z-index is being rendered it's own positioning context.
keparo
2008-10-22 22:22:35
I'm all for convention over random numbers. Currently the modal overlay is set to 2999 and the modal content to 3000. I've gone as high as 9999 before, but was reticent about going much higher.
Andrew Hedges
2008-10-22 22:32:41
Yeah, I appreciate that you had reservations about it. In the past, I've recklessly jacked the z-index up to 6) or 7) 9's, just to see if I could find a limit.
keparo
2008-10-22 22:37:32
+5
A:
Keep in mind that z-index doesn't work globally, but only within a 'stacking context' (which has hard to digest definition in CSS), and if the ad establishes it's own stacking context, then z-index values you set elsewhere may not affect it at all.
However more likely it's an issue of "windowed" Flash (object without wmode=transparent attribute), which browsers render on top of everything, as if was a window above browser's window. In such case z-index won't help at all. You'll need to force ad[-provider] to use wmode=transparent or use some crazy hacks with iframes.
porneL
2008-10-22 22:35:03
Forcing the ad-provider to do anything is likely to be harder than any technical solution. Sigh. Good info, though!
Andrew Hedges
2008-10-22 22:41:17
+1
A:
Quote from http://techtrouts.com/is-there-a-limit-to-the-css-z-index-property/:
Theorically the z-index property should be unlimited, or at least within an int type range, depending on OS and browser. However, to avoid browser bugs you should limit your z-index values to +/- 32767 .
Chris Pietschmann
2008-11-01 22:40:02
+1
A:
Maximal zIndex value supported by most browsers is 2147483647 (2^31-1), but Opera 9.2 doesn't accept values larger than 2147483583; They fixed it in version 9.5.
valums
2009-03-06 07:34:58