The Z-Index CSS Property: A Comprehensive Look
z-index
so that you can use this special type of property confidently and effectively.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. It 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.
Further Reading on SmashingMag:
- Sassy Z-Index Management For Complex Layouts
- Mastering CSS Principles: A Comprehensive Guide
- The Definitive Guide to Using Negative Margins
- Stronger, Better, Faster Design with CSS3
What is z-index?
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 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:
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.
Syntax
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");
myElement.style.position = "relative";
myElement.style.zIndex = "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:
![](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fa03faf6-27c2-4029-9de4-60a7cdd2e43f/z-index-ie6.gif)
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:
– Choose Year – 2009 2010 2011
Gold Box
Unless you’re viewing this page with IE6, you’ll see the gold box above overlapping the `