Z-index is the CSS property governing how high in the stack an element is, if you visualise the elements as appearing in a 3D stack coming out of the page. The actual value of an element’s z-index doesn’t matter; just its value relative to other elements on the page. Elements with higher z-indexes appear on top of elements of lower z-indexes.
I was just designing a bookmark for Scrumptious (a TiddlyWeb powered tool to have discussions around websites; I’ll talk about it in a future article). And with a bookmarklet, I need it to appear above everything else on the page. So it needs a higher z-index than everything else. Maybe not the highest z-index possible, since there might be apps that need to sit above my app’s bookmarklet (Design For Extensibility). But I still need to know the maximum z-index.
It would be nice if the standards publshed the maximum allowed z-index. Every reference always makes a comment like “there’s no real limit”. For good reason too, since the W3C standards don’t really cover this. The CSS Spec (2.1) goes so far as to include an “Elaborate description of Stacking Contexts”, and it’s even called “zindex.html”, but even here, omits to pin down the max z-index value.
A handy summary was stated on StackOverflow (which has fast become the central resource for programming FAQs and a site I have quickly come to adore for its clear mission, clean design, and community feel):
So basically there are no limitations for z-index value in the CSS standard, but I guess most browsers limit it to signed 32-bit values (−2147483648 to +2147483647) in practice (64 would be a little off the top, and it doesn’t make sense to use anything less than 32 bits these days)
Looking further, I came across the most comprehensive summary of the situation, published recently. It also highlights the fact that it’s not just the maximum value we want, but what happens if we exceed it.
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
So the best way would be to use browser detection and pick the max from there. But if not, use 2147483647.
Ok, so what did you do now?
Take a high z-index value or try to find the largest z-index value in the document?
You could check all DOM elements to find the highest value. Maybe not something worth doing every time, but it could still make a nice bookmarklet to find the highest z-index value on a page.
I like to use 8675309 for an arbitrarily high Z-index, because it’s my lucky number. Helps me find my code in other places, too.
From the Twitterverse:
Thanks for that! I was searching everywhere for a definitive reference for the max z-index.
Pingback: Making a Bookmarklet: A Challenge on All Fronts
well, here are some precisions :
with FireFox (v3) and Safari (v4) you can use negative value for z-index. And the maximum value is 2147483647. But there is a difference between these two browsers with the range between the minimum value and the maximum value setted. For FireFox, the range has to be 2147483647. (+1 for the zero) For Safari, the range could be 4294967294 (2147483647*2)
For Safari, the maximum value setted can be 2147483647 at the same time a minimum value can be setted to -2147483647 for an other object.
With Firefox, if you set a maximum value to 2147483647 for an object, you can’t use a negative value to an other object.
check it…
by
@niamor36 very useful, thanks.
Just remember:
If you have two divs that are siblings.
Div 1 has z-index:1 and the Div 2 has z-index:2
No child of Div 1 will ever stack above anything in Div 2 ( even with the maximum z-index ).
With z-index always evaluate the stacking order of the parent divs first.
@dougwig:
Don’t know what browser you’re using, but even if an object is a child of another object, the Z-Index still applies regardless of the parent’s Z-Index.
Pingback: Solution for jQuery Cycle’s scrollHorz not working
From tests i found that FF3.6 starts it z-index from the lowest z then adds 2147483647.
So, if your lowest z-index is -2147483647 your highest possible will be 0. Or in my case 2147473648 since my backdrop has a z-index of -9999.
Kind of enoying if you have lots of stuff you want to position in front and back.
Nice timing to bump this. I saw a tweet yesterday:
translate3d(0, 0, value) is the new z-index
what if, the browser was the 64bit version running on 64 OS… because 2147483647 is the max int value for 32bit. am i wrong??
Pingback: Web Design Weekly #23 | Web Design Weekly
Lol this has to be one of the weirdest posts I’ve seen about Web development but hey good to know xP