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

    Thanks for the info! Very usefull.


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

    how do you get IE 7 on your mac?

  5. User Avatar
    Permalink to comment#

    Or you could just #badge:

    z-index: -1;

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

    It isn’t work!


    please, fix it…

  9. User Avatar

    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. User Avatar

    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. User Avatar

    Video not working for me either:(

  12. User Avatar

    The vid doesn’t work :(

  13. User Avatar

    Great video as always Chris, LOVE your videos!

  14. User Avatar
    Permalink to comment#

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

  15. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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.

  19. User Avatar
    Permalink to comment#

    How do I get my MailChimp Pop up to overlay page content?

    I am trying to get the MailChimp newsletter pop up to lay on top of the logo and nav bar, but as is it gets caught behind the two, making it ineffective.
    Can someone help me with code so that the newsletter pop up lays on top of the page content?

    I’ve already tried this CSS:
    .mc-modal-bg { z-index: 99995 !important; }
    .mc-modal { z-index: 99999 !important; }

    But it’s not working.

    Also, all the articles’ features images are overlapping (on both desktop and mobile),
    The homepage is now a total mess as we can only see a few images (because they others are hidden behind),

    Thank you very much for your help!
    Les vaillantes

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.