Maximum CSS Z-Index Value

A couple of months ago I launched a new site and got a complaint that a leaderboard ad was appearing above a dropdown menu that I had on the page. Simple enough, I inspected the css of the ad, saw that it had a z-index of 999 and upped the z-index on the menu to 1,000. Problem solved. Same problem again a couple of weeks later, upped it to 10,000. Again today I had to inspect another ad that was causing the same problem. It had an index of 1 million. How annoying.

That got me wondering though, what is the maximum value that I could set a z-index to. Looking into various CSS documentation, there didn’t appear to be a maximum value specified. The answer, in Firefox, IE, and Chrome is:

2147483647

That is the maximum signed value of a 32 bit integer. Technically, I would imagine this limitation comes from the programming language that the browser was made in. I’m sure there are some older browsers where setting it to this value might make something break. Interesting stuff though. So, if you want to make sure your element is absolutely 100% sure on top, set it to 2147483647. Problem solved. In reality however, I found it very annoying that an ad had set it to such a high number. Considering on any given page, there is going to be a very limited amount of layers, setting it to a much smaller number should do the trick.