#40: How z-index Works

by: Chris Coyier

Nov 3 2008

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: 18:37

Download Video File

Subscribe to The Thread

  1. Toni L

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

    Reply ↓
  2. Gfx-Dzine

    Thanks for the info! Very usefull.

    Mike.

    Reply ↓
  3. Alen

    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?

    Reply ↓
  4. Alex Wind

    how do you get IE 7 on your mac?

    Reply ↓
  5. Nile

    Or you could just #badge:

    z-index: -1;

    Reply ↓
  6. carlnunes

    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!

    Reply ↓
  7. ivan

    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

    Reply ↓
  8. Nietzs

    It isn’t work!

    404 PAGE NOT FOUND!

    please, fix it…

    Reply ↓
  9. BryGuy

    Chris…. the video doesn’t seem to be working. Hopefully it’s up soon b/c “z-index” has been the bane of my existence today.

    Reply ↓
  10. BryGuy

    Not sure why…. but after posting my comment the video now works. More importantly it answered my z-index problems. Thanks once again…. you rock.

    Reply ↓
  11. Kismet

    Video not working for me either:(

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~