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 1×107). 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?
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.
z-index: 9999; is a hack for search engine.
what do you mean? is it bad for seo?
10 makes perfect sense too.
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!
Why would you need to use print liminator to print illegal-ish pages any ways eh? ;)
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!
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.
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.
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.
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.
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.
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.
I usually use increments of 5 or 10, but sometimes you just need to go OVER 9000!
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.
I like your idea pretty much, with some refining it’d be a very handy way to use z-index.
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.
Well said!
I got a bat with this guys name on it. LOL
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
Lol. Who ticked you off? XD
Wow! Bitter much, Jason? Ignore the troll, Chris, and keep up the good work!
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.
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.
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: π;
10,20,30,40 is a good way because you could always add 1-9 on the end. Great post.
#header, #page-wrap {
z-index: ∞;
}
:D
What if I wanted to put something over that? :D
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.
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
*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
}
Okay, there’s a few mistakes there, but you get the idea :-)
Definitely you would want to generate the CSS in advance on a production site…
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.
Am I the only that never have used z-index, ever?
most likely :P
Hmm, perhaps you can stick your printliminator in a margin-top of the HTML or BODY element.
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.
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?
We need some kind of dynamic CSS. Hang on a tick!
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!
What I find especially interesting about those ridiculously high z-index numbers is that fact that they will have no effect for some people with slightly outdated browsers.
In Windows XP (32 bit), for example, the limit for integers like this is +/-32,727, and until recently many browsers would simply discard that information instead of correcting it.
For more info, see:
http://stackoverflow.com/questions/227738/is-there-an-upper-limit-to-z-index-values-in-web-browsers
http://en.wikipedia.org/wiki/Integer_%28computer_science%29
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 :)
I was talking about Firefox 2.
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.
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
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.
I always thought it was kind of weird that there’s no standard “unit” for z-index values. I tend to stick with increments of 100 – it just gets really confusing to keep track of things otherwise.
I like the idea someone else mentioned above about setting the stacking order via selectors instead of with an arbitrary z-index value. So instead of trying to keep track of a bunch of different values, I could just say “make all elements with class .top appear above all elements of class .bottom” or something.
Not sure what the syntax would be, but you get the idea.
A good solution to organizing
z-indexes. Is there a library that does this?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.