Grow your CSS skills. Land your dream job.

#40: How z-index Works

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.

Comments

  1. Toni L
    Permalink to comment#

    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
    Permalink to comment#

    Thanks for the info! Very usefull.

    Mike.

  3. Alen
    Permalink to comment#

    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. Permalink to comment#

    how do you get IE 7 on your mac?

  5. Permalink to comment#

    Or you could just #badge:

    z-index: -1;

  6. Permalink to comment#

    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
    Permalink to comment#

    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

  8. Nietzs
    Permalink to comment#

    It isn’t work!

    404 PAGE NOT FOUND!

    please, fix it…

  9. 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.

  10. 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.

  11. Kismet

    Video not working for me either:(

  12. Jess

    The vid doesn’t work :(

  13. Cameron

    Great video as always Chris, LOVE your videos!

  14. Thank you, Chris: this video had exactly the information that I needed.

  15. I believe you forgot to explain how z-index works for nested elements. Does z-index works only for sibling elements? Is it possible for a “child” element to have a greater/lower z-index than his “parent” or his “uncle”?

    AFAIK, a parent element with z-index (and position) properties resets the stack order for the children within, right?

  16. Tom Z
    Permalink to comment#

    I’ve read a lot of great stuff on your site – unfortunately this did not solve my problem. For anything complicated see the “Stacking Contexts” page at sitepoint (http://reference.sitepoint.com/css/stacking). Any declaration of a z-index for an element will create a new local “stacking context”, and that element and all its children/descendants will be put in the same slot in any higher-level stacking context.

    So if you have #parent>#child, and you need to stick some random element above #parent but below #child, then #parent has to have z-index: auto. (I believe – at least this is what solved my problem.)

  17. Hi Chris, thanks for the awesome tutorial.
    There’s one thing I’m still trying to fix though. I am using a blank WP theme using the featured image for the posts and I am targeting that image with .posts:hover with a z-index of 10, position relative, background-color but still when I hover, the background-color appear behind. I’m stuck few days :/ Thanks in advance. G

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".