CSS/Properties/z-index
From W3C Wiki
< CSS | Properties
Contents |
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.
