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


  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.


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

    how do you get IE 7 on your mac?

  5. Nile
    Permalink to comment#

    Or you could just #badge:

    z-index: -1;

  6. carlnunes
    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#

    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,

  8. Nietzs
    Permalink to comment#

    It isn’t work!


    please, fix it…

  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.

  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.

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

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

  15. Alonso Torres
    Permalink to comment#

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

    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

  18. nanda
    Permalink to comment#

    can anybody please tell me that in the above video the task bar is different how can i make or manage to get the taskbar in my windows 10. thanking you so much . please tell me.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.