Skip to: content, navigation

z-index (CSS property)

Spec
Inherited Initial Version
No auto CSS2
Browser support (more…)
IE5.5+ FF1+ Saf1.3+ Op9.2+
Buggy Buggy 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
5.5 6.0 7.0 1.0 1.5 2.0 1.3 2.0 3.0 9.2 9.5
Buggy Buggy Buggy Buggy Buggy Buggy 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.

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:
#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.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

Search