Grow your CSS skills. Land your dream job.

Rational Z-Index Values

Published by Chris Coyier

A reader named Arjan recently emailed me telling me about a website that The Printliminator didn't work on. They had traced it back to the fact that the site used a bunch of "overlays" with ridiculously high values for z-index. The Printlimintor injects itself on the page with absolute positioning and a z-index value of 10000, which I already consider to be ridiculously high. So should we start playing this game and come back with even more ridiculously higher z-index values? I'm going with no.

Arjan reported he was seeing the value at "z-index: 1e+07" (which I would think is whatever DOM inspector he was using shortening it to be more readable, but means 1x107). In Safari's Web Inspector I was seeing z-index: 1.62909e+07; Firefox/Firebug was showing me z-index:12600322; Who knows what is in the the code that actually generates these things. I'm going to refrain from linking to the site for now since it looked a little illegal-ish to me.

A bad game to play

Perhaps this website is using super high numbers like that because they are trying to override something external they can't control with huge z-index numbers. So then the external source could raise their numbers to ensure they are one top again, and a vicious cycle ensues. A dumb, un-winnable game.

I could see another technique emerging where the JavaScript that places the external content polling all the elements on the page for their z-index values and setting theirs one higher. Then sites that are trying to fight it doing timed polls for the same thing, potentially resulting in weird flickering reminiscent of CSS jitter man.

Rendering implications?

Does anyone know for sure if this is more stressful on a rendering engine to deal with z-index values of super high magnitudes? My guess is that it is a bit more stressful, not to mention all the more characters in your CSS file.

More rational z-index values

I actually like using "somewhat" high z-index values. I like separating them by increments of 100. So if you have three things that you need stacked and know the order, the first one would have z-index: 0;, the second 100, the third 200. That way you have some breathing room, if for whatever reason someday you need to put something in between the second and third, you can use 110. If you were to have used 1, 2, and 3, you wouldn't have that option. I also avoid negative values in general, since you gotta be careful that things don't get buried underneath the body or html elements if that's not what is wanted.

A number like 9999 could then be used as the "absolute top ever value", which would be visually recognizable because of the different numbering convention.

 

Do you have a system for when you use z-index?

Comments

  1. Permalink to comment#

    So true. I generally use increments of 10 or 50, but 100 is just fine. 9999 is something I never reach generally. I’ve seen sites like that too.

  2. Somoene
    Permalink to comment#

    A z-index of infinity, and then someone will put a z-index of infinity +1!

    But you are absolutely right about having reasonable numbers!

  3. ZiggidY
    Permalink to comment#

    Why would you need to use print liminator to print illegal-ish pages any ways eh? ;)

  4. Anthony
    Permalink to comment#

    I haven’t had too many dealings with z-indexes but it does always seem a little strange when I see others using 10000 and higher.

    I agree with you guys, obviously 1, 2, 3 doesn’t leave much room for ‘re-thinks’ but blocks of 10, 50 or 100′s is more than sufficient I would think, not to mention much easier to keep track of!

  5. I actually use values of 1, 2, 3, 4, 5, etc.
    Don’t really see the point in adding unnecessary zeros (I don’t add hundreds or thousands of empty layers in photoshop…)

    • Yes, but photoshop layers allow you the ability to restructure with a simple drag and drop. Re-arranging 10 layers with z-index values of 1-10 takes far longer if you don’t structure with an eye to future alterations.

    • Good point, thanks for the tip.

  6. I generally stay away from negative z-index values as Firefox tends to ( or did ) have issues with them, otherwise I also try to follow the +100 increments as well … although I generally start at z-index 5 for the first element.

  7. even values separated at 100 seem a bit much. I typically stick with values separated at 10. It’s very unlikely that I’ll need 9 items layered in between values of 10.

  8. I’ve always wanted a way in CSS to state: “Put all elements matched by the selector X above all elements matched by the selector Y.”

    That could prevent a lot of these stupid values. As in all selectors, clashing declarations would be solved by specificity and the !important declaration.

    • James P
      Permalink to comment#

      But what happens when you get irrational instructions

      e.g.
      x over y;
      b over y;
      b over x;?

    • Parsers follow a downward order, moving the smallest amount of places to satisfy each condition:

      X over Y:
      X
      Y

      B over Y:
      X
      B
      Y

      B over X:
      B
      X
      Y

      If later on in the same stylesheet, a new declaration appears (Y over X) then the order is overwritten to :

      BYX

      There’s no conflicts.

  9. I’ve never really used z-indexes that much, but when I do, I prefer a separation of 10 rather than 100. It’s really rare that you’ll have to insert more than 10 layers between two existing layers.

  10. Edman
    Permalink to comment#

    I usually use increments of 5 or 10, but sometimes you just need to go OVER 9000!

  11. Eddy
    Permalink to comment#

    I think the method of how we deal with this issue should we rethought. The way z-index works now is that the order of the elements is relative to a number, zero. The elements then go either in front or behind this “zero barrier”, depending on the value of the z-index. If the value is 10, the element will go in front, on the tenth step and there can only be 9 other elements in between. If it’s -20, it will go behind on the twentieth step and so on.

    The fact that we can only use integer means that the number of spots between two elements or one element and the “zero barrier” is limited. To increase it, we would have to change the z-index value of the elements (e.g. from 10 to 11). That is what makes us use crazy values like 10000.

    Allowing real numbers instead of only integers as z-index values could solve this problem in a way. If we have for instance an element with z-index 2 and another with z-index 3, we could insert one in between using z-index 2.5 (note, this won’t work now since we can only use integers). The problem with this is that it would get quite messy and we would still have crazy values like 1.5252 or something.

    What we need instead is a way to arrange the elements relative to each other. I’m not sure how we would accomplish that and what the possibilities are. What I managed to come up with is this:


    @z-index {
    back: #foo
    front: #bar, #foobar, span#example;
    }

    What I’m thinking here is arranging the positioned elements in two arrays. One that is behind the non-positioned elements, and one that is in front of them. This way, the elements are ordered relative to each other, and there are unlimited spots between them.

    I’m sure there are better solutions to this and hopefully one of them will make it into CSS4.

  12. Jason
    Permalink to comment#

    Hilarious. Everyone should use Z indexes under 10,000 except me. I am Chris Coyier and i hereby decree, 9,999 will be the highest z-index allowed, except for my printliminator thingy. You have gone from awesome CSS helper to cocky think-i-know-it-all over the past year. Dood, find your humility again cause your site and your teachings are suffering. The fake questions you ask at the end of your posts are a transparent comment-fishing blog-101 technique, not you actually reaching out to your audience.

    • Noted. However, I plan to keep on posting my opinions and asking for yours. Don’t like it, don’t come here. (Especially tomorrow, you’ll hate tomorrow). Dood.

    • Permalink to comment#

      Well said!

    • Permalink to comment#

      I got a bat with this guys name on it. LOL

    • Permalink to comment#

      Sorry for multi posting.

      Jason, are you aware of why phylosophy is such a universal approach?

      I was enlightened the other day, when i questions “what do phylosophers do all day, where is the gain of the Phylosophy profession?”

      The reply.

      “Phylosophy is not there to solve any exact problems but simply to advance thinking.”

      Go eat some phylosophy dude, or my bat is still here. :) jj

    • Permalink to comment#

      Lol. Who ticked you off? XD

    • Chris
      Permalink to comment#

      Wow! Bitter much, Jason? Ignore the troll, Chris, and keep up the good work!

    • Jason
      Permalink to comment#

      OK, yeah, i was a little too trollish, but i stand by my premise. I have honestly felt a change in tone over the past 6 months or so. I’ve been a big fan of the screencasts and site from early on, but find myself more and more turned off. It used to be a “hey, we’re all in this together,” attitude but now it seems more strained and “i’m just posting to post.”

      Chris, “if you don’t like it, don’t come here.” OK. Fine. You probably don’t even detect any of my criticisms in your work. You’ve accrued a small designer-celebrity status (and it’s well deserved) and that’s awesome, but it seems to have stolen what made you great in the first place.

      I wonder if my criticism would have still been met with such powdered kegs if i had broached the subject more gracefully. ah well, live and learn. Hope the latter finds it’s way back here.

    • Permalink to comment#

      While I don’t really agree w/ Jason, let’s not squash someone’s opinion because we don’t like it. They may actually have a point worth thinking about.

      Thanks for posting it & this article, Chris. Although I am the guy occasionally using a Spinal Tap z-index.

  13. Permalink to comment#

    I don’t use z-index too much, but when I do, I generally use increments of 1000. Sometimes I just pick (not so) random numbers: 0, 14, 42, 69, 128, 256…

    When you said “rational” I thought you were saying people normally used irrational numbers as z-index values :P

    z-index: π;

  14. Euan
    Permalink to comment#

    10,20,30,40 is a good way because you could always add 1-9 on the end. Great post.

  15. #header, #page-wrap {
    z-index: ∞;
    }

    :D

  16. This is the sort of thing that you would want, but sometimes it’s not possible.

    With drop down menus, you want it to appear over everything right? So then you have a lightwindow which is supposed to appear over everything, then you have some floating bar at the bottom which appears over everything BUT the lightwindow, it’s a just a huge mess in the end.

    For a site starting out, it should establish a z-index “standard” but for bigger sites who perhaps haven’t thought of using z-index in the beginning might be a problem for them.

    There’s nothing wrong with using high z-index’s in my opinion though, but definitely don’t go over 9999.

  17. Ginger
    Permalink to comment#

    I almost never use z-index. Though if I do, I usually split the main frames with 1000 (ie. header, main-content, footer); but only if there’s a need of any of them (ie. a “fixed position” header on top would either be at the bottom of the code, or on top with z-index; I’d go with the latter).

    Anything else increments of 100 are my way.

    So, asuming the amount of major elements are below 5, I’d never be above 4900.

    By the way: Using php + css (or an existing engine that is indirectly this combo) you can make variables.

    Like
    [? $zHeader = 1000;]
    #header {
    z-index: [? echo $zHeader; ?]
    }

    #nav {
    z-index: [? echo $zHeader+10 ?]
    }


    Gringer

    • Ginger
      Permalink to comment#

      *fix*

      Like:

      [? $zHeader = 1000;]
      #header {
      z-index: [? echo $zHeader; ?]
      }

      #menu-effect {
      z-index: [? echo $zHeader-10 ?]
      }

      #nav {
      z-index: [? echo $zHeader+10 ?]
      }

      Maybe even write a function that keeps track of the highest number used so far.

      [?php
      $maxZI = 1;
      function zI($element, $increment, $newval){
      if ((empty($increment)) { $increment = 1; }

      if ($element == "max")
      {
      $maxZI = $maxZi+$increment;
      echo $maxZI;
      }
      elseif ($element && $newval && $increment)
      {
      ${$element} = $newval+$increment;
      echo $${$element};
      $maxZI = maxZI+$increment;
      }
      elseif ($element && $increment)
      {
      ${$element} = ${$element}+$increment;
      echo $${$element};
      $maxZI = maxZI+$increment;
      }
      elseif ($element && $newval)
      {
      ${$element} = $newval;
      echo $${$element};
      }
      else { // nothing }
      }

      You'd use for example:


      #elementOne{
      z-index: [? Zi('elementOne', ,500) ?] // echo's 500
      }

      #elementOneChild{
      z-index: [? Zi('elementOne', 10) ?] //echo's 510
      }

      #bossElement{
      z-index: [? Zi('max') ?] // echo's 511
      }

      #bossElement2{
      z-index: [? Zi('max') ?] // echo's 514
      }

    • Ginger
      Permalink to comment#

      Okay, there’s a few mistakes there, but you get the idea :-)

    • Ambrose Chua
      Permalink to comment#

      Definitely you would want to generate the CSS in advance on a production site…

  18. Permalink to comment#

    I like the idea of 0, 100, 200, etc… Seems more reasonable than my usual 9999 :). By the way, it’s been a while since I’ve visited the site; I love the new design! It’s really rare for a site to keep the same colors/layout and just improve the subtleties. Very nice.

  19. Albin
    Permalink to comment#

    Am I the only that never have used z-index, ever?

  20. Hmm, perhaps you can stick your printliminator in a margin-top of the HTML or BODY element.

    • Permalink to comment#

      While its a fairly reasonable work-around to this problem (and one which many use) imo it makes too heavy an alteration to the design and kind of throws a pothole in the UX, it bugs me the way some element add ons I use shift the page around when I activate/deactivate them.

      With regards to the issue – unplanned z-index blowouts of :9823492; is just rediculous, definately use an incremement system, in an ideal world where all designers followed best practice this wouldnt be an issue, those who dont simply cause a sidetracked discussion like this and hopefully save you a sheet of paper.

  21. Permalink to comment#

    Now this is purely my own opinion but i think the z-index property is pretty bad practice although it is w3c compliant. I prefer to use the organic stacking order where possible. And use z-index as little as possible, perhaps for speech bubbles or overlay icon links.

    This is mainly due to the incompatibility of z-index in IE.

    Anyones thoughts?

  22. Ben
    Permalink to comment#

    We need some kind of dynamic CSS. Hang on a tick!

  23. I used to hate z-index, when I was a “learner” designer and I would download scripts from sites for drop down menus etc. My flash would start appearing over the top of the menus or my menus would drop behind everything etc etc. Downloaded scripts would always seem to have a stupidly high z-index as well.

    Now I just make sure I use increments of 10,20,30 etc, works perfectly well for me.

    We get on just fine nowadays!

  24. Jason
    Permalink to comment#

    Negative z-index do not work in Firefox, but if you add “position:relative;left:0px;top:0px;z-index:0″ to the body it will :)

  25. Jason
    Permalink to comment#

    I was talking about Firefox 2.

  26. Gary Storey
    Permalink to comment#

    I use z-index values of 4, 8, 15, 16, 23 and 42 (kidding). Typically I stick with increments of 10 unless I am forced to include fly-out/dropdown navigation. Those I start at 1000 to make sure they are above the content.

  27. Permalink to comment#

    A while ago I put something together so people can find out by themselves how things work when it comes to z-index:

    Teach yourself how elements stack

  28. Daniela
    Permalink to comment#

    Interesting discussion.

    I was wondering why using z-index became so automatic for us. There used to be life before z-index.

    I find those high numbers ridiculous too and rarely use z-index. I do love its uses on design, and what it can achieve but they should come in a warning label so as to not be overused.

    Much love.

  29. Permalink to comment#

    Hey,

    Interesting post. Just thought I’d post my problem and solution today in-case anyone else ever gets issues with this.

    If you use a stupidly high z-index, every browser except Firefox seems to lower this down to their highest possible value. However, if the number is too high for Firefox, then it will simply set the z-index to “0″.

    So be warned, it caught me out.

    The reason I’m using such a high value is that I took over this site from someone else who used high values, and as I don’t know the full inner workings yet, I used a high number to ensure that what I was doing got seen correctly…but alas…there was a limit!

    So be warned, browsers seem to have a z-index threshold.

    Mikey.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".