Maximum value of z-index
Friday, April 17th, 2009Z-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).