#40: How z-index Works

By: Chris Coyier on: 11/3/2008 with 9 Comments

Z-index can be a little confusing sometimes. In this screencast I attempt to explain how it works, how it’s tied to positioning, some quirks, and some general advice.

Running time: 19 minutes

Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready)

Get the Flash Player to see this player.

Tweet

9 Responses

1. Toni L says:

   11/09/2008 at 4:11 am

   If static element won’t do z-index, does it mean, that it kinda has z-index-value of zero through the line.
2. Gfx-Dzine says:

   11/10/2008 at 4:06 am

   Thanks for the info! Very usefull.

   Mike.
3. Alen says:

   11/12/2008 at 4:17 am

   Thanks for the great tips. Just got a quick question if anyone knows using the z-index can i place any div element with a higher z-index over a flash movie. I know Chris mentions about drop down menus somtimes getting lost under flash. But is it simply a matter of creating a div element for the flash and another div element for the page element you want to layer on top of the flash movie and setting the position to either absolute or relative and setting the z-index to a higher value?

   will this work?
4. Alex Wind says:

   12/27/2008 at 2:42 pm

   how do you get IE 7 on your mac?
   • Chris Coyier says:

     12/28/2008 at 7:19 am

     http://css-tricks.com/ie-on-mac/
5. Nile says:

   01/10/2009 at 7:04 pm

   Or you could just #badge:

   z-index: -1;

6. carlnunes says:

   01/12/2009 at 9:04 pm

   I love how I can nav to css-tricks.com and search for “z-index” and get the info I need to get the job done right!
   Thanks again!
7. ivan says:

   02/02/2009 at 5:12 pm

   Hello,
   First, i would thank you for the lessons on this site.
   Is it possible to give a lesson about positioning in css.
   I am a beginning webdesigner and i have some problems with positioning in css, espacially between the different browsers.

   Thank you,
   Ivan