Is there an upper limit to z-index values in web browsers?

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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 .