CSS/Properties/z-index
< CSS | Properties
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.