From W3C Wiki
< CSS‎ | Properties
Revision as of 18:11, 16 June 2011 by Hiroki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search


The z-index property specifies the stack order of an element.


Values auto | <integer> | inherit
Initial value auto
Applies to positioned elements
Inherited No

Point, Note

  • Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).


  • auto
    The stack level of the generated box in the current stacking context is '0'. The box does not establish a new stacking context unless it is the root element.

  • <integer>
    This integer is the stack level of the generated box in the current stacking context. The box also establishes a new stacking context.

  • inherit
    Takes the same specified value as the property for the element's parent.


Example A


   z-index: 1;
   width: 250px;
   height: 100px;
   position: absolute;
   top: 50px;
   z-index: 2;
   background-color: #999;


  <h1><img src="images/logo.png" alt="W3C"></h1>
  <p>This is a paragraph. z-index: 2;</p>

Csslist2 z-index.png

CSS Reference

The CSS specification defines the z-index property in 9.9.1 Specifying the stack level.