New 
December 2008 CSS3 transitions and z-index
You can apply CSS3 transitions to the z-index property, but it may work in a way you don’t expect.
This is just a reminder that you can apply transitions to an element’s z-index (aka, where it lays in the stack), but only by stepping through the layers. The browser has to keep z-index in whole numbers. This makes total sense, but it’s something I forgot about on a recent project.
I was working on an interface with overlapping elements, and I wanted whichever one was hovered to come to the front of the stack. I wanted this move to the front to look smoother, instead of one element just jumping out from behind another one suddenly. “Aha!” my brain said. “I will add a transition!” But my brain hadn’t thought this all the way through, and, of course, it didn’t work.
If you stop to think about it (which I eventually did), this makes perfect sense. If you want to take one element with z-index:1 and transition it to lay on top of another element with z-index:2, how in the world is the browser supposed to create intermediate steps between those two values? You can’t have an element with a z-index value of 1.5. An element can’t kinda overlap another element. Either it’s above or below. The browser can’t create some weird, merged together state where the two elements are on the same level and intermixing, both partially transparent on just the spots that are sharing the same level.*
What the browser can do is increment the z-index value in whole numbers over the course of your transition duration. So, if I have an element with a z-index value of 1 and I want to gradually get to 10, the browser can first set z-index to 2, then 3, then 4, and so on. If you have a short transition duration or a long way to go from your starting value to your ending value (like changing z-index from 1 to 1000), it will step through these changes very quickly.
Here’s a demo of z-index transitioning slowly so you can see how the browser increases the z-index value step by step; hover over the block labeled One to see it happen. Here are some screenshots of the same demo taken along the course of the transition.
The first div is naturally at the bottom of the stack (z-index: 1).
When hovered and the transition begins, it first jumps completely on top of the Two div as it simultaneously becomes opaque.
Notice that it is never partly on top and partly below any given div. It’s entirely above divs Two and Three here, and entirely below divs Four and Five.
The transition is almost over now. It’s worked it’s way up to z-index: 4 at this point.
By the end of the transition, it has z-index: 6 and is on top of all the other divs.
So remember: z-index is indeed one of the properties you can apply a transition to, but the transition has to happen in full steps, not necessarily as gradually as you might imagine it in your head.
* If the elements you’re transitioning z-index on are partially transparent (using HSLA for the background color, for instance) to begin with, you can kind of fake this effect. But if you look closely, you can still see the moment the element swaps places with another in the stack. It’s just harder to notice.
Related Posts:
My recent posts
- Flexbox syntax for IE 10
- It’s tough to keep track of which version of the Flexbox spec uses which property and value names, so here’s a comparison of the current syntax with the 2011 syntax that IE 10 supports, as well as a basic definition of what each Flexbox property does.
- CSS3 Layout presentation at In Control Orlando
- Download the slides for my presentation on CSS3 Layout for the In Control 2013 Orlando conference, as well as get links to related resources on flexible box layout, grid layout, and other new CSS3 layout-related modules that can be used as alternatives to float layout.
- People with disabilities use mobile devices, too
- Does mobile accessibility matter? A survey of people with disabilities found that almost all of them use a mobile device. If you have a disability yourself, please participate in one of two surveys out now that seek to learn more about your mobile use.
- A redesign is coming
- If I publicly state that I’m going to be launching a redesigned version of this site, maybe I will actually do it!
- Building Responsive Layouts presentation at CSS Dev Conf
- Download the slides for my presentation on Building Responsive Layouts for the CSS Dev Conference, as well as get links to related resources on fluid layouts, media queries, and other responsive web design techniques, tools, and inspiration.