Rational Z-Index Values

Avatar of Chris Coyier
Chris Coyier on

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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?