What’s the Maximum Z-Index?

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.

15 thoughts on What’s the Maximum Z-Index?

  1. 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.

  2. From the Twitterverse:

    • Details on the max z-index and what happens when you try to go over it http://bit.ly/URFTq (via @dalmaer) Thu Jun 04 13:35:41 +0000 2009 from devongovett
    • RT: @dalmaer: Details on the max z-index and what happens when you try to go over it http://bit.ly/URFTq Thu Jun 04 12:31:59 +0000 2009 from julius_eckert
    • Max Z-Index? do you know? http://bit.ly/URFTq Thu Jun 04 07:42:02 +0000 2009 from oscargodson
    • Details on the max z-index and what happens when you try to go over it http://bit.ly/URFTq (via @dalmaer) Thu Jun 04 06:05:56 +0000 2009 from typo3agentur
    • Very handy: Details on the max z-index and what happens when you try to go over it http://bit.ly/URFTq (via @dalmaer) Thu Jun 04 05:31:56 +0000 2009 from cramforce
    • RT @dalmaer: Details on the max z-index and what happens when you try to go over it http://bit.ly/URFTq Thu Jun 04 04:56:51 +0000 2009 from 7655cjc
    • Details on the max z-index and what happens when you try to go over it http://bit.ly/URFTq Thu Jun 04 04:44:34 +0000 2009 from dalmaer
    • What’s the Maximum Z-Index?: Internet Explorer 8, 2147483647, 2147483647. Firefox 2, 2147483647, *element di.. http://bit.ly/19bDwp Thu Jun 04 05:34:38 +0000 2009 from joeclor9
    • CSS: going over the z-index maximum in FF2 is like going over the event horizon http://bit.ly/wn3s6 Thu Jun 04 06:03:37 +0000 2009 from mundizzle
    • Interesting post on what the maximum value of a z-index can be. Most browsers support 2147483647. http://digg.com/u14nE0 Thu Jun 04 07:32:49 +0000 2009 from shauntrennery
    • RT @otrops: What is the maximum z-index? http://tr.im/no1t – A lovely table of maximum values in the major browsers (via @mahemoff) Thu Jun 04 09:48:18 +0000 2009 from KevJaques
    • What is the maximum z-index? http://tr.im/no1t – A lovely table of maximum values in the major browsers (via @mahemoff) Thu Jun 04 09:35:41 +0000 2009 from otrops
  3. Pingback: Making a Bookmarklet: A Challenge on All Fronts

  4. 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

  5. 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.

  6. Pingback: Solution for jQuery Cycle’s scrollHorz not working

  7. 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.

  8. Pingback: Web Design Weekly #23 | Web Design Weekly

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>