Maximum value of z-index
Z-index is used to determine the stacking order of absolutely positioned elements on a page. The CSS 2.1 spec says the value of z-index should be an integer. But it doesn’t define the any maximum values for it. So the actual max is often determined by what variable type the browser uses to store the z-index.
I made a simple test page to find these limits and figure out what happens when you exceed them.
| 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 3 | 2147483647 | 0 |
| Safari 3 | 16777271 | 16777271 |
| Safari 4 | 2147483647 | 2147483647 |
| Opera 9 | 2147483647 | 2147483647 |
The results show IE, Firefox and Opera all use a 32-bit signed integer to store the value of z-index. Safari 3 on the other hand hits the max at 16777271. I’m not really sure what that number corresponds to, but it looks like they’ve fixed the issue in Safari 4.
Update: Eric Seidel, one the developers behind Webkit, had the answer to where 16777271 comes from.
Using google to compute the log base 2 (lg) = lg(16777271) gave me the answer.It must have been a 24-bit bitfield. I expect this would have been
on RenderLayer, and was for saving space.
It’s also pretty interesting what happens when that limit is exceeded. Most browsers just assume the maximum allowed value, but FF3 actually converts it to 0 and FF2 doesn’t show the element at all (as it does with any elements with negative z-index values).
Extra information for this entry
-
Abstract
What’s the largest z-index you can use and what happens when you go over?
-
Comments
You may leave a comment, or trackback from your own site.
-
Tags
Comments Post a Comment
2^24 + 55 = 16777271.
No idea where the 55 is from.
[…] further, I came acrossthe best summary of the situation, published recently. It also highlights the fact that it’s not just the maximum value we […]
[…] specifically, it depends on the web browser. According to Eric Puidokas, who did some z-index testing in a number of web browsers, “The results show IE, Firefox […]
Just wanted to send you a belated Thank You for the information and all the research & testing you did on this.
For some reason, I always felt “slightly crazy” when I was giving a z-index a value of 99, but what little did I know, eh?
With full credit to your article (and Cameron Moll, who alerted me of this): http://www.webgyver.com/web-design-and-development/whats-the-max-value-for-the-z-index/
Thanks again!
Now, there are a lot of other things stored as values in CSS, height and width might be the most obvious. What happens to those? Do you think you could set up a larger test for testing everything which uses numbers in CSS?
Very cool! I love it when people put decent tests together and share the results. Good question from Zirro… what happens when this is applied to other properties of CSS objects??
[…] Maximum value of z-index » Eric Puidokas » Programming and Designing for the Web (tags: css z-index) Socio-Encapsule this: […]
I’m skeptic about the idea that the z-index for Safari 4 has been fixed to 2147483647 because of the following situation. I’ve a div that gets generated through script and it has a z-index 1410065407, another div with z-index 1410065408 or 2000000000 doesn’t go to overlay the first one. The first has flash-content, that’s through but both elements are absolute positioned… so I’m really stuck here :s Does anyone has enlightments…?
SORRY! It is a misunderstanding, it seems dat in Safari another z-index was generated, 9999999999, so it could never have been underneith the second div. Many sorry’s! Delete my posts ; ) Thanks for your information because it was very handy after all!
Post a Comment