The Z-Index CSS Property: A Comprehensive Look


Most CSS properties are quite simple to deal with. Often, applying a CSS property to an element in your markup will have instant results — as soon as you refresh the page, the value set for the property takes effect, and you see the result immediately. Other CSS properties, however, are a little more complex and will only work under a given set of circumstances.

The z-index property belongs to the latter group. z-index has undoubtedly caused as much confusion and frustration as any other CSS property. Ironically, however, when z-index is fully understood, it is a very easy property to use, and offers an effective method for overcoming many layout challenges.

In this article, we’ll explain exactly what z-index is, how it has been misunderstood, and we’ll discuss some practical uses for it. We’ll also describe some of the browser differences that can occur, particularly in previous versions of Internet Explorer and Firefox. This comprehensive look at z-index should provide developers with an excellent foundation to be able to use this property confidently and effectively.

What is it?

The z-index property determines the stack level of an HTML element. The “stack level” refers to the element’s position on the Z axis (as opposed to the X axis or Y axis). A higher z-index value means the element will be closer to the top of the stacking order. This stacking order runs perpendicular to the display, or viewport.

3-dimensional representation of the Z axis:

3-D Representation of the Z Axis

In order to clearly demonstrate how z-index works, the image above exaggerates the display of stacked elements in relation to the viewport.

The Natural Stacking Order

In an HTML page, the natural stacking order (i.e. the order of elements on the Z axis) is determined by a number of factors. Below is a list showing the order that items fit into a stacking context, starting with the bottom of the stack. This list assumes none of the items has z-index applied:

  • Background and borders of the element that establish stacking context
  • Elements with negative stacking contexts, in order of appearance
  • Non-positioned, non-floated, block-level elements, in order of appearance
  • Non-positioned, floated elements, in order of appearance
  • Inline elements, in order of appearance
  • Positioned elements, in order of appearance

The z-index property, when applied correctly, can change this natural stacking order.

Of course, the stacking order of elements is not evident unless elements are positioned to overlap one another. Thus, to see the natural stacking order, negative margins can be used as shown below:

Grey Box

Blue Box

Gold Box

The boxes above are given different background and border colors, and the last two are indented and given negative top margins so you can see the natural stacking order. The grey box appears first in the markup, the blue box second, and the gold box third. The applied negative margins clearly demonstrate this fact. These elements do not have z-index values set; their stacking order is the natural, or default, order. The overlaps that occur are due to the negative margins.

Why Does it Cause Confusion?

Although z-index is not a difficult property to understand, due to false assumptions it can cause confusion for beginning developers. This confusion occurs because z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative.

To demonstrate that z-index only works on positioned elements, here are the same three boxes with z-index values applied to attempt to reverse their stacking order:

Grey Box

Blue Box

Gold Box

The grey box has a z-index value of “9999”; the blue box has a z-index value of “500”; and the gold box has a z-index value of “1”. Logically, you would assume that the stacking order of these boxes should now be reversed. But that is not the case, because none of these elements has the position property set.

Here are the same boxes with position: relative added to each, and their z-index values maintained:

Grey Box

Blue Box

Gold Box

Now the result is as expected: The stacking order of the elements is reversed; the grey box overlaps the blue box, and the blue box overlaps the gold.


The z-index property can affect the stack order of both block-level and inline elements, and is declared by a positive or negative integer value, or a value of auto. A value of auto gives the element the same stack order as its parent.

Here is the CSS code for the third example above, where the z-index property is applied correctly:

#grey_box {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
  background: #ddd;
  position: relative;
  z-index: 9999;

#blue_box {
  width: 200px;
  height: 200px;
  border: solid 1px #4a7497;
  background: #8daac3;
  position: relative;
  z-index: 500;

#gold_box {
  width: 200px;
  height: 200px;
  border: solid 1px #8b6125;
  background: #ba945d;
  position: relative;
  z-index: 1;

Again, it cannot be stressed enough, especially for beginning CSS developers, that the z-index property will not work unless it is applied to a positioned element.

JavaScript Usage

If you want to affect the z-index value of an element dynamically via JavaScript, the syntax is similar to how most other CSS properties are accessed, using “camel casing” to replace hyphenated CSS properties, as in the code shown below:

var myElement = document.getElementById("gold_box"); = "relative"; = "9999";

In the above code, the CSS syntax “z-index” becomes “zIndex”. Similarly, “background-color” becomes “backgroundColor”, “font-weight” becomes “fontWeight”, and so on.

Also, the position property is changed using the above code to again emphasize that z-index only works on elements that are positioned.

Improper Implementations in IE and Firefox

Under certain circumstances, there are some small inconsistencies in Internet Explorer versions 6 and 7 and Firefox version 2 with regards to the implementation of the z-index property.

<select> elements in IE6

In Internet Explorer 6, the <select> element is a windowed control, and so will always appear at the top of the stacking order regardless of natural stack order, position values, or z-index. This problem is illustrated in the screen capture below:

The <select> element appears first in the natural stack order and is given a z-index value of “1” along with a position value of “relative”. The gold box appears second in the stack order, and is given a z-index value of “9999”. Because of natural stack order and z-index values, the gold box should appear on top, which it does in all currently used browsers except IE6:

Gold Box

Unless you’re viewing this page with IE6, you’ll see the gold box above overlapping the <select> element.

This bug in IE6 has caused problems with drop-down menus that fail to overlap <select> elements. One solution is to use JavaScript to temporarily hide the <select> element, then make it reappear when the overlapping menu disappears. Another solution involves using an <iframe>1.

Positioned Parents in IE6/7

Internet Explorer versions 6 and 7 incorrectly reset the stacking context in relation to the nearest positioned ancestor element. To demonstrate this somewhat complicated bug, we’ll display two of the boxes again, but this time we’ll wrap the first box in a “positioned” element:

Grey Box

Blue Box

The grey box has a z-index value of “9999”; the blue box has a z-index value of “1” and both elements are positioned. Therefore, the correct implementation is to display the grey box on top of the blue box.

If you view this page in IE6 or IE7, you’ll see the blue box overlapping the grey box. This is caused by the positioned element wrapping the grey box. Those browsers incorrectly “reset” the stacking context in relation to the positioned parent, but this should not be the case. The grey box has a much higher z-index value, and should therefore be overlapping the blue box. All other browsers render this correctly.

Negative Values in Firefox 2

In Firefox version 2, a negative z-index value will position an element behind the stacking context instead of in front of the background and borders of the element that established the stacking context. Here is a screen capture displaying this bug in Firefox 2:

Firefox 2 and negative values

Below is the HTML version of the above screen capture, so if you view this page in Firefox 3 or another currently-used browser, you’ll see the proper implementation: The background of the grey box (which is the element that establishes the stacking context) appears below everything else, and the grey box’s inline text appears above the blue box, which agrees with the “natural stacking order” rules outlined earlier.

Grey Box

Blue Box

Gold Box

Showcase of Various Usage

Applying the z-index property to elements on a page can provide a quick solution to various layout challenges, and allows designers to be a little more creative with overlapping objects in their designs. Some of the practical and creative uses for the z-index property are discussed and shown below.

Overlapping Tabbed Navigation

The CTCOnlineCME2 website uses overlapping transparent PNG images with z-index applied to the “focused” tab, demonstrating practical use for this CSS property:

CTCOnlineCME Tabbed Navigation3

CSS Tooltips

The z-index property can be used as part of a CSS-based tooltip, as shown in the example below from trentrichardson.com4:

CSS Tooltip5

Light Box

There are dozens of quality light box scripts available for free use, such as the JQuery plugin FancyBox6. Most, if not all of these scripts utilize the z-index property:

JQuery FancyBox7

Light box scripts use a semi-opaque PNG image to darken the background, while bringing a new element, usually a window-like <div> to the foreground. The PNG overlay and the <div> both utilize z-index to ensure those two elements are above all others on the page.

Drop-Down Menus

Drop down menus such as Brainjar’s classic Revenge of the Menu Bar8 use z-index to ensure the menu buttons and their drop-downs are at the top of the stack.

Brainjar's Revenge of the Menu Bar9

Photo Gallery Effects

A unique combination of JQuery animation and z-index can create a unique effect for use in a slideshow or photo gallery, as shown in the example below from the usejquery.com10 website:'s Unique Gallery11

Polaroid Photo Gallery by Chris Spooner12 utilizes some CSS3 enhancements combined with z-index to create a cool re-stacking effect on hover.

Pure CSS Polaroid Photo Gallery13

In this Fancy Thumbnail Hover Effect14 Soh Tanaka changes z-index values in a JQuery-based script:

Fancy Thumbnail Hover15

CSS Experiments by Stu Nicholls

Stu Nicholls describes a number of CSS experiments on his website CSSplay16. Here are a few that make creative use of the z-index property:

CSS image map17

CSS Image Map18

CSS game19

CSS Game20

CSS Frames Emulation21

CSS Frames Emulation22

Layered Layout Enhancements

The 24 ways23 website implements z-index to enhance the site’s template, weaving year and date columns that stretch the length and width of the site’s content, for a very interesting effect.'s Unique Gallery24

Fancy Social Bookmarking Box

The Janko At Warp Speed25 site uses z-index in a “fancy share box”:

Fancy Share Box26

Perfect Full Page Background Image

This technique was described by Chris Coyier27 and used on the ringvemedia.com28 website. It implements z-index on content sections to ensure they appear above the “background” image, which is not a background image, but only mimics one:

Perfect Full Page Background Image29


Stacking contexts in CSS are a complex topic. This article did not attempt to discuss every detail on that topic, but instead has attempted to provide a solid discussion of how a web page’s stacking contexts are affected by z-index, which, when fully understood, becomes a powerful CSS property.

Beginning developers should now have a good understanding of this property and avoid some of the common problems that arise when trying to implement it. Additionally, advanced developers should have a stronger understanding of how proper use of z-index can provide solutions to countless layout issues and open doors to a number of creative possibilities in CSS design.

Further Reading


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33

↑ Back to topShare on Twitter

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.


Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Also note; the highest z-index value IE will allow is 2147483647 which is the maximum value for a 32bit integer.

    Unbeknown to most; it is also a double Mersenne prime.


  2. 2

    I needed something like this to further my knowledge about the Z-index. I was always confused on what it was, and this is a great post filled with examples. Thanks!

  3. 3

    One thing that is important to know is that there is a limit for the z-index value since FireFox 2.5. Since that version only z-index values less than or equal to 999999999 are working. Before FF2.5 you could use even bigger z-index values.

  4. 4

    Thank you for the article. Nice explanation.

  5. 5

    Great tutorial. I needed something like this to further my knowledge about the Z-index. I was always confused on what it was, and this is a great post filled with examples. Thanks!

  6. 6

    a game in pure css – wow!

  7. 7

    Good rundown of the z-index feature. I feel very few designers employ this technique, maybe because they don’t know the property exists or are terribly confused by it. However, as you said in your article once you get into it z-index is extremely easy to understand and can push your layouts that little extra step further.

  8. 8

    I’m a great fan on the z-index:; property and use it often in sites, particularly those like Lucy Locket Kindergarten where there is a set background at the bottom. One issue I have noticed is the way IE handles the images, even when set to a lower z-index:; it still appears higher than other elements, therefore disrupting the flow. Try clicking my link at the bottom of that site in IE, Safari and Firefox and you’ll see exactly what I mean.

  9. 9

    Excellent article! The z-index property is indeed the least known, generally speaking. Cheers

  10. 10

    Is it really that confusing? Set ‘position:’ then use z-index as you would layers in a Photoshop document with ‘1’ at the bottom. Not hard really. Sorry if I sound like a know-it-all!

    @ Sam Benson – Very good knowledge. You should check out the Five Numbers series on BBC Radio 4 website, sounds like it’ll be up your street.

  11. 11

    Here’s another example of how to use z-index in making a fancy menu.

  12. 12

    @smashingmagazine team:

    You should demonstrate the box behaviour with images of the boxes. Otherwise feedreaders like GoogleReader don’t show any effect on them. It ignores position and z-index

  13. 13
  14. 14

    Why you use z-index values like 999999 when you can simple use values like 5, 6, 7.. or 10, 20, 30…

  15. 15

    As always: Great explanation. Nice article. Thanks.

  16. 16

    Great article. Z-index property is an excellent css feature in my opinion.I love it.

  17. 17

    Website css based on z-index :

  18. 18

    Thanks! I’ve been seeing the full page backgrounds around and have wondered how that is done.

  19. 19

    EXCELLENT Post! Thanks for saving me from many many future headaches. This has caused so many problems for me in the past, especially in understanding the browser differences.


  20. 20

    I really love all your guys posts and am brought back here constantly through my RSS feeds and Twitter (as I’m sure many people are), but the adverts on your website are becoming ridiculous… it looks like a spam site from first glance. Web related ads were bearable, now free phone downloads? Come on guys…

  21. 21

    I make excessive use of the z-index property to make sure the playing cards on World of Solitaire correctly stack upon each other. Without z-index, a Solitaire game in HTML/CSS/JavaScript would have been near impossible :)

  22. 22

    Great article really enjoyed it!

  23. 23

    Hey guys, great article, it’s nice to see complex bugs described so simply. My one complaint is: please remove the link to w3schools under “Further Reading.” That site is a cesspool of dated misinformation. There are MUCH better resources out there, like MDC (

  24. 24

    Smashing Magazine — you’re good, you.. you’re good.

  25. 25

    @Daniel I presume people use z-index:9999; so that it’s obvious that that particular element is supposed to be at the top.

    Using z-index:30; doesn’t really scream “I’m at the top!”.

  26. 26

    Excellent article. Worth mentioning that z-index doesn’t appear to work on positioned elements with overflow in IE6+ (see ).

  27. 27

    Thanks a lot! Really useful.

  28. 28

    Oh, and becasue of Fx 2 bug, we cannot use negative z-index?

  29. 29

    This answered a lot of my z-index questions. Jonas’s link does help clarify it further.

  30. 30

    Great article, just what I needed

    Thanks :)

  31. 31

    A great article. As always.

  32. 32

    bambang a indonesian designer

    September 16, 2009 1:31 am

    nice articel,

    z-index is nice, but i think not good for your web, ‘couse the browser have many times image request to websites, i recommended, you use the image for your web (css sprites is good), if your image not use many color, make png it, if use many color jpg it.


  33. 33

    Awesome. Mixing z-index with transparent png’s and dynamic values via javascript or PHP creates awesome websites.

  34. 34

    Thanks for the great article. I was talking with a designer today about z-index and I never really understood it although now I can see how many times I could have used it.

  35. 35

    Just thought I’d add about the use of CSS and Flash, which can create problems, where you need to overlap a CSS Div on top of a flash embeded item.

    1. In your code for the flash file, add the following:

    2. In the “embed” area, you need to add this:

    Add your div with absolute positioning and off you go.


  36. 36

    Excellent, this was what I needed to optimize my website.

  37. 37

    since this is about z-index… can someone clarify ma doubt !?
    inside a z-indexed div, i insert an transparent png and use png fix js for IE6, but the png image still shows with a shadow… :(
    has anybody come across this kinda problem?

  38. 38

    I never thought of using z-index in any of my project until I learned its usage and importance here. Thanks for this nice piece of collection.

    Now I am beginning to think of a photo blog under my Entertainment News site.

  39. 39

    I had problems with z-index on my site which took ages to work out!

    Get Free Quality Backlinks Here

  40. 40

    great tutorial, thanks!

  41. 41

    I do not understand how the “Go China” site implementation of z-index is “perfect”? It is atrocious in Opera with double scrollbars (and 1 of them not even visible!).

  42. 42

    Good atricle. Thanks. One of the difficulties I have with z-index is that you never can tell on a page what the highest z index is. For example, if I am making a modal dialog control which can be used on many pages, how can I set the div used to make the modal to be above all else, when I do not know what the maximum z-index on a page it might be used on is? Setting to 999999 or whatever the maximum is in my opinion is not a good solution – who knows who else has done that. Is there a way to determine what the maximum z-index used is?

  43. 43

    Good Information and use of examples. Hi Dominic W: A trick I’ve used in the past is to group important properties like this in one area of my CSS file. So, you might want to put something like this at the top. If this post appears twice then it’s because I added a link to the previous post and then read the snippet about no link dropping when commenting.

    /* z-index order */

    #div1 {
    z-index: 1;
    #div2 {
    z-index: 2;


    #div1 {
    background:#fff; etc.
    #div2 {
    background:#ccc; etc.

    Just a simple way of maintaining your files. Hope this helps.


  44. 44

    Great article. Totally helped me figure out my issue tonight.

  45. 45

    Oooh, this is a lovely explanation of z-indexing, thanks so much for making things plain! I’m just learning CSS one bit at a time, and it’s been so satisfying employing z-indeces- still a long way to go but I’ll get there, partly thanks to great developers like you!

    Take care for now,

    Magpie Brown
    Bespoke Arts Publicity

  46. 46

    excellent article. it caused that i become your fan!

  47. 47

    i have flash in layer(#id1) which has negative value in z-index with overlapping of one layer(#id2) which has positive value in z-index . As i have some buttons in flash but now it’s not clickable with above scenario. layer(#id2) completely overlaps layer(#id1) so not able to click the elements in layer(#id1).

    i have tried “wmode” in flash but it is not working at all.

    is the any way to overcome this issue?

    thanks in advance

  48. 48

    Most clear and concise explanation of the z-index property. Much appreciated, good karma to you, sir!

    @Pratik: Have you tried playing with the “wmode” parameter when embedding your flash? wmode=transparent seems to do it.

  49. 49

    @Filt: I already tried “wmode” parameters. but it is not working…

  50. 50

    Very good about z-index.Thanks

  51. 51

    I make excessive use of the z-index property to make sure the playing cards on Would You Rather Questions correctly stack upon each other. Without z-index, a would you rather game in HTML/CSS/JavaScript would have been near impossible :)

  52. 52

    That is great, i was tryin so hard to get solution and I found it here:)
    gr8 job

  53. 53

    Good one. But I had some issue that z-index doesn’t work in iframe.Just I tried to overlay the iframe video and some luck..any idea/suggestions????

  54. 54

    “If you view this page in IE6 or IE7, you’ll see the blue box overlapping the grey box. This is caused by the positioned element wrapping the grey box. Those browsers incorrectly “reset” the stacking context in relation to the positioned parent, but this should not be the case. The grey box has a much higher z-index value, and should therefore be overlapping the blue box. All other browsers render this correctly.”

    Is there a fix for this?

  55. 55

    Now I know what it means. amazing what you learn when you take the time to find out.

  56. 56

    the z-index is maybe one of the most important attributes in modern web design

  57. 57

    The explicit positioning is the secret ingredient.

    More than 2 years later and folks are still thanking you for this post. It just saved my bacon, too, so… THANK YOU!!!!

  58. 58

    The first example in section “Why Does it Cause Confusion?” is wrong – the elements are positioned in contrast of what the example’s text states “But that is not the case, because none of these elements has the position property set.”.

  59. 59

    >The first example in section “Why Does it Cause Confusion?” is wrong

    I’ve just found this article as well and this confused me too. In IE9, the two examples under this topic look identical.

  60. 60

    Dimitar: It’s because Smashing Magazine’s website design has changed since this post was written. Nowadays it uses a css file ( ) that has this css:

    div, ul, li, form{position:relative}

    Which kind of messes up examples in this post :D

  61. 61

    Great explanation of z-index. I was looking for a good article that would explain it well and you did a great job. Thanks for sharing.

  62. 62

    I was starting to think z-index wasn’t working properly until I read your article and found out that it only works with those three positions. Thanks!

  63. 63


    Any idea why the z-index would affect the font of my drop down menus in safari and chrome? Totally stuck here!

  64. 64

    This might not be the case but if you’re using CSS transitions you might want to add -webkit-transform: translate3d(0,0,0) to all of the elements under the dropdown menu.

    div.dropdown * {
    -webkit-transform: translate3d(0,0,0);
    Hope this helps.

  65. 65

    Hi… Happy to know this.. Useful info….!

  66. 66

    Very nice tut on Z-Index, I now have a much better understanding on using this important CSS property.

  67. 67

    Thanks for the detailed explanation in z-index.

  68. 68

    nice tutorial. BUt one question ?

    z-index:9999 what does the value 9999 means.???? the value 0,1,500 means ???

  69. 69

    Thank you for the tutorial! It’s great!

    I’m having some problems with Slim-Box on my site that is probably due to wrong usage of z-index. This post will definitely help me there.

    The thing is that the overlay shows up in front of the image instead of behind it, so I am trying different z-index values to fix it, but to no avail… The only position property that makes the image appear at all is “absolute”, so I’m keeping that the way it is. But I can’t figure out why different z-index values don’t solve the issue.

    Here is the script, after I changed the values:

    #lbOverlay {position: fixed; z-index: 500; left: 0; top: 0; width: 100%; height: 100%; background: #000; cursor: pointer;}
    #lbCenter, #lbBottomContainer {position: absolute; z-index: 9999; overflow: hidden; background: #fff;}
    .lbLoading {background: #fff url(‘loading.gif’) no-repeat center !important;}
    #lbImage {position: absolute; left: 0; top: 0; border: 10px solid #fff; background-repeat: no-repeat;}
    #lbPrevLink, #lbNextLink {display: block; position: absolute; top: 0; width: 50%; outline: none;}
    #lbPrevLink {left: 0;}
    #lbPrevLink:hover {background: transparent url(prevlabel.gif) no-repeat 0 15%;}
    #lbNextLink {right: 0;}
    #lbNextLink:hover {background: transparent url(nextlabel.gif) no-repeat 100% 15%;}
    #lbBottom {font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; font-size: 10px; color: #666; line-height: 1.4em; text-align: left; border: 10px solid #fff; border-top-style: none;}
    #lbCloseLink {display: block; float: right; width: 66px; height: 22px; background: transparent url(‘closelabel.gif’) no-repeat center; margin: 5px 0; outline: none;}
    #lbCaption, #lbNumber {margin-right: 71px;}
    #lbCaption {font-weight: bold;}

    Any idea what is wrong there?



  70. 70

    “If you view this page in IE6 or IE7, you’ll see the blue box overlapping the grey box. This is caused by the positioned element wrapping the grey box. Those browsers incorrectly “reset” the stacking context in relation to the positioned parent, but this should not be the case. The grey box has a much higher z-index value, and should therefore be overlapping the blue box. All other browsers render this correctly.”

    I would love to know how to solve this problem, too. A lot of my clients refuse to upgrade their computers, and refuse to migrate from Exploder. I wonder if there’s a site yet that’s just dedicate to fixing IE6&7 compatibility issues.

  71. 71

    Here’s a fix for the IE6&7 problem.

    Say you’ve set your positions and for whatever reason it’s just not working… try this.

    1. Give image that’s supposed to be on top a z-index of something high, like 20 or 1000. Anything.

    2.Now give the image intended to be on the bottom a z-index of any NEGATIVE number, like -1 or -354.

    For whatever reason, this seems to work.

    I haven’t tested it with more than two layers. Hopefully it still holds up!!!

    How about some feedback?

  72. 72

    Create a root element that contains all of the elements you wish to use z-index on. I suggest a div but you could even use body I suppose. The trick is to make this root element position: relative; and all of it’s children position: absolute;

  73. 73

    Thank you! I found this extremely helpful. I was able to finally get an annoying Z-index problem resolved.

  74. 74

    April 16, 2014 3:48 pm

    thx man!!

↑ Back to top