z-index (CSS property)

Spec
Inherited Initial Version
No auto CSS2
Browser support (more…)
IE5.5+ FF3+ SA1.3+ OP9.2+ CH2+
Buggy Full Full Full Full

Syntax

z-index: { integer | auto | inherit } ;

Description

This property specifies the stack level of a box whose position value is one of absolute, fixed, or relative.

The stack level refers to the position of the box along the z axis, which runs perpendicular to the display. The higher the value, the closer the box is to the user; in other words, a box with a high z-index will obscure a box with a lower z-index occupying the same location along the x and y axes.

See Stacking Contexts for more information about stacking contexts.

Example

This style rule makes the element with ID "warning" absolutely positioned and assigns it a higher stack level than its siblings:

#warning {
  position: absolute;
  z-index: 1;
}

Value

An integer value—which can be negative—sets the stack level of the box in the current stacking context, and also establishes a new stacking context. The box itself has stack level 0 (zero) in the new context.

The value auto gives the box the same stack level as its parent, and doesn’t establish a new stacking context.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Buggy Buggy Buggy Buggy Full Full Full Full Full Full Full Full Full Full

In Internet Explorer for Windows versions up to and including 6, select elements always appear on top of everything else; their stack level can’t be changed.

Internet Explorer for Windows versions up to and including 7 always use the nearest positioned ancestor to determine the stacking context for the element in question.

Internet Explorer for Windows version 7 treats the value auto as if it were 0 (zero).

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Internet Explorer for Windows up to and including version 8 illegally parse a decimal value for z-index (source James Hopkins) .

In Firefox versions up to and including 2, a negative stack level positions the box behind the stacking context, rather than above the context’s background and borders and below block-level descendants in the normal flow.

Previous / Next page

  1. Previous
  2. Next

Related reference material

  • position
    specifies the positioning scheme used to position an element

User-contributed notes

ID:
#3
Contributed:
by LFA
Date:
Thu, 18 Mar 2010 09:20:43 GMT

In IE6 & IE7 the stacking does some wierd stuff as well. If you have two posisioned divs that you want to stack/overlap, you can't just assign z-index values to thease two divs. The parent of the div that should stack on top of the other one has to have a higher z-index value than both of them for it to work...

More on this here:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

[feel free to edit and correct my spelling/english, thanks]

ID:
#2
Contributed:
by brothercake
Date:
Thu, 30 Oct 2008 03:49:23 GMT

The "iframe shim" hack solves the layering problem in IE, and works for select elements, and most kinds of embedded media content (including flash) -- http://www.macridesweb.com/oltest/IframeShim.html

ID:
#1
Contributed:
by jtresidder
Date:
Fri, 07 Dec 2007 15:53:07 GMT

While not strictly a CSS problem, this problem often crops up when trying to position with CSS: Flash content will display above all other content by default, regardless of the z-index settings of the flash and/or the CSS-positioned content. The workaround for this is to explicitly set the Flash's window-mode to the default option of 'opaque', but this does not work in all browsers.

Related Products