Grow your CSS skills. Land your dream job.

z-index

Last updated on:

div {
  z-index: 1; /* integer */
}

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).

Elements can overlap for a variety of reasons, for instance relative positioning has nudged it over something else. Negative margin has pulled the element over another. Absolutely positioned elements overlap each other. All sorts of reasons.

Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning will always appear on top of elements with default static positioning.

Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.

Note that older version of IE get this context stuff a bit screwed up. Here's a jQuery fix for that.

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works 4+ 4+ Works

Comments

  1. Mr Z
    Permalink to comment#

    “Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.”

    That’s not quite right. In your illustration, “not child” will only be on top if the green box starts a stacking context, for which it needs z-index of anything except auto (or opacity of anything except 1.0). Just being position: relative doesn’t start a stacking context.

    The main point about stacking contexts is that z-index can be used to rearrange the stacking order of elements only inside their own stacking context. That entire stacking context has a stacking position within its stacking context that’s determined by its z-index property and those of its siblings in that parent stacking context. Elements from different stacking contexts are therefore never interleaved in the final stacking order (this is what the spec means when it says stacking contexts are “atomic”).

    If you think in terms of the “painters algorithm”, where objects are painted onto a scene back-to-front, then a stacking context is like a painting within a painting. You first paint everything in the stacking context back-to-front in the proper order, then slap the whole result in whereever it belongs when you come to paint its parent context.

    With no z-index, things do stack pretty much in DOM order but with positioned stuff above, but it’s also worth mentioning that floats are also brought in front of non-floats (but behind the positioned boxes).

  2. Permalink to comment#

    This had me caught out for a while earlier, so I thought I’d post a note here – don’t forget that z-index still respects parent’s overflow. So if you still can’t see something despite a z-index in the millions, check it’s not being cropped by an overflow:hidden

    • Matt
      Permalink to comment#

      I was fighting with this for an hour until I read this comment! Thanks!

    • Aashish
      Permalink to comment#

      Yeah I was also struggling with the same issue of parent’s overflow being hidden and your comment saved me! Thank you!

    • A. Cabreira
      Permalink to comment#

      Brilliant, solved me a days headache , thanks!

    • aj
      Permalink to comment#

      thank you thank you thank you!!

  3. Permalink to comment#

    Thanks, I’ve been fighting with z-index again today. For the first time I think I might be winning!

  4. Hi, I have come across a issue where negative Z-Index does not work on IOS ipad 4. Its real bummer as it used to send a fullscreen BG to the back of my template which is useful as I dont have to assign Z-Index to all the other elements. Does any one know a suitable solution, maybe iOS as some of its own special commands which is the trend these days.? Cheers.

  5. Abhinav
    Permalink to comment#

    @Toby: Thanks mate :) Little things :)

  6. Z-index is new to me. Still I am not so clear about it. Can you please help me by giving some examples. Does it work in iOS also?

  7. Permalink to comment#

    Z-index is one of the most important css property of element, when overlaying one component over other. Thanks. Nice information

  8. Rex
    Permalink to comment#

    thanks for your life saving teachings! you have rescued me from being drowned!

  9. q
    Permalink to comment#

    > _**_[zxczxczxc> lkj__](http:// "adsdad")_**_

  10. braders
    Permalink to comment#

    I spent an hour trying to figure this out, and the information was here. Your amazing

  11. Salman
    Permalink to comment#

    thanks. your comment saved me from googling

  12. Vaibhav
    Permalink to comment#

    Thanks for the info!! really helpful!!

  13. sk

    #border {
    width:250px;
    height:350px;
    background:url(‘border.png’) no-repeat;
    margin:auto;
    position:relative;
    }
    .picture {
    position:relative;
    z-index:100;
    }

    Not Working

  14. ktian

    cool responsive website :D
    keep it up

  15. So this is good knowledge, but it would make this article really useful if you showed how to get the “CHILD” to stack above the “NOT CHILD”, while still remaining a child of the green element.

  16. Nice article boss…

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```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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