CSS/Properties/z-index

From W3C Wiki

z-index

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

Description

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;).


Values

  • 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

Example A

[style.css]

 h1{
   z-index: 1;
 }
 p{
   width: 250px;
   height: 100px;
   position: absolute;
   top: 50px;
   left:30px;
   z-index: 2;
   background-color: #999;
 }


[index.html]

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

CSS Reference

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