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 of 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).
- z-index:
- { integer
- | auto |
- inherit } ;
The {z-index:} property specifies the stack level of a box whose position value is one of {absolute;}, {fixed:}, or {relative:}.
The stack level refers to the position of the box along the z axis, which runs perpendicular to the display. The higher the value, the closer the box is to the user; in other words, a box with a high {z-index:} will obscure a box with a lower {z-index:} occupying the same location along the x and y axes.
The {z-index:} property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: {z-index:} only works on positioned elements ({position:absolute}, {position:relative}, or {position:fixed}).
Specifies the order of {position:relative} or {position:absolute} boxes in the z-axis. The higher the number, the higher that box will be in the stack.
The {z-index:} property specifies the stack level of a box whose position value is one of {position:absolute;}, {position:fixed;}, or {position:relative;}.
The stack level refers to the position of the box along the z axis, which runs perpendicular to the display. The higher the value, the closer the box is to the user; in other words, a box with a high {z-index;} will obscure a box with a lower {z-index;} occupying the same location along the x and y axes.
Sets or retrieves the stacking order of positioned objects.