What is the highest possible Z-Index Value?
In January of 2010, shortly after I took up a consulting gig at Reuters, I noticed a disturbing pattern: 4 times in a single month, we had to take down an ad from the site because it was overlaying other elements on the page – most frequently affecting the main site navigation drop down – creating a really bad user experience. (At the time, Reuters had just relaunched with this new site a month ago – thus why the bug wasn’t diagnosed/fixed yet). Advertisers were setting the z-index of their ads at a higher number than our own key page elements – most frequency the main site navigation.
So I googled around with a simple question: What is the highest z-index value one can use? Can it be infinitely high or is there a previously unwritten ceiling? My search for answers landed me Eric Puidokas’s awesome blog – where the answer was somewhat surprising. Did you know that in Firefox 2 if you set an element to have an index value over 2147483647 it will completely disappear from the page?
I also found that the IAB (Interactive Advertising Bureau) – a group that sets ad recommendations – suggests that some ads be set to a z-index as high as 6 Million (!). Check out the screen grab below lifted from here (page accessed June 17. 2012).
Armed with this research, I recommended the best cross browser fix to the front end code team and they set the navigation’s z-index to be a significantly higher number. No ads every overlaid key elements of a Reuters page again.
Since Eric’s initial research is now 3 years old, I thought I’d offer a bit of an update using more recent browsers. Here’s the complete table – Eric’s research up top for historic reference, and mine is below the black bar.
Since Firefox sped up its release schedule, I decided to just check one version (8) between 3.6 and the current version (14). I like testing things, but I don’t have time to test each one.
A clear exception to this rule is if you are a publisher that will have overlay ads (basically a lightbox on the page with an ad on it that users have to close). The same would be true for lightbox photo sets.
An overlay ad will obviously need to have a z-index above your content, or a css override that is on the page only when one of these interstitial ads are running (typically you don’t run these all the time, unless you’re a sadist and want to drive away your users completely – thus why they’re called interstitials). This is really just an example – there’s plenty of other valid reasons to overlay an element on a page – but I’m not telling you anything you don’t already know, so let’s move on to the good stuff:
|Browser||Max z-index value||When exceeded, value changes to:|
|Internet Explorer 6||2147483647||2147483647|
|Internet Explorer 7||2147483647||2147483647|
|Internet Explorer 8||2147483647||2147483647|
|Firefox 2||2147483647||*element disappears*|
|Firefox 12 (Ubuntu Linux)||Infinite. (tested OK through 100 digits in length)||Infinite.|
|Firefox 13 (Mac)||2147483647||2147483647|
|Safari 5 (Mac)||Infinite, but rounded off (see note 1)||(See Note 1)|
|Chrome 19 (Mac)||Infinite. (tested OK through 100 digits in length)||Infinite.|
|IE 9 (PC)||Infinite. (tested OK through 100 digits in length)||Infinite.|
|Firefox 3.5 (PC)||2147483647||0|
|Firefox 8 (PC)||2147483647||2147483647|
|Firefox 14 (PC)||2147483647||2147483647|
|Chrome 19 (PC)||Infinite. (tested OK through 100 digits in length)||Infinite.|
|Opera 11 (PC)||Infinite. (tested OK through 100 digits in length)||Infinite.|
Note 1: Safari 5 on Mac does something very strange. It seems you can enter as high of a number as you want, but it will round it off. For example: If I set the z-Index to 950000007123412341234441 it rounds it off to 950000007123412300000000. If you enter 2147483650 (going above the previous threshold of 2147483647), it will work (returning 2147483650, according to Firebug. The key seems to be that any number over 16 digits in length gets rounded downward.
In a nutshell:
Chrome, Opera and IE9 seem to be the only browsers supporting a true infinite value for the z-index, while Firefox is still using 2147483647 and Safari now engages in some strange rounding off behavior after a number exceeds 16 digits in length.
And now for a rant (if you’re up for it)…
A call for standards.
Personally I think 2147483647 would have made a good cap – and should frankly be the cap. This should be a standard. I really like that in FF2 any element above 2147483647 completely disappears from the page. Throw that element off the cliff!!! I can’t imagine a need for a UI designer to ever need to set a z-index at 100 digits in length – though I can think of nefarious advertisers and agencies out there that might want to set their ads at 101 digits in length so they can overlay their ads over editorial content so it gets noticed more, and then claim “Aw shucks, I’m sorry, I didn’t mean to break your website with my ad“… Please… I’ve heard that story more times than I wished I had. It is not a coincidence our element was set at say, 2000, and you set yours at 2001. I really wish I could say I was kidding about this and that it never happened.
If there were a cap on how large a z-index could be, supported by all browsers, such a battle could never happen. Content publishers could just set their key page elements at the highest z-index and not worry about any 3rd party content (ads, etc) coming in and overlaying key elements of the page and getting in the users. Sure – the user will notice the ad – right as they’re closing the tab and going to another site.
Since this is a pie-in-the-sky request for which there are probably valid reasons to argue against, wise publishers should probably have alternate preventative measures – perhaps css at the bottom of the page to ensure key element z-index’s are not overwritten. I haven’t researched this idea yet – or reasons why there shouldn’t be a set highest z-index standard. If you’ve got an argument against mine, please comment.
Fortunately, since z-index support is so fantastically inconsistent across browsers, any advertiser, agency, or anyone with bad intent are still hard pressed to get away with a z index battle and actually win across all browsers. The internet is one huge QA team that will complain, immediately.
And when all else fails, publishers should have a technologist on staff who can police these situations – because ultimately it is the publisher’s page. If a third party tag is causing problems, it should be removed immediately and resolved in QA. Expectations can be easily managed by providing all advertisers and third party solution providers with a spec outlining their max z-index, with the understanding that if they go over it, they will be removed from the site. Site visitors don’t care who’s at fault – they just want functional sites.
Disclaimers: As always, all thoughts in this blog are my own opinion and not the views of Reuters or anyone else.
And no, I did not test negative z-index values. Gotta leave some work to someone else to take a swing at no?
Thanks to Eric Puidokas for the original insight and research, Chris C for the Linux test and Pegleg for the IE9 test.