z-index
Description
z-index sets the placement of a positioned element along the z-axis.
Positive numbers are closer to the user, and negative numbers are further away.
| Item | Value |
|---|---|
| Initial value | auto |
| Inherited | No. |
| Version | CSS2 |
| JavaScript syntax | object.style.zIndex="1" |
| Applies to | Positioned elements. |
Syntax and Property Values
z-index: integer | auto | inherit
The property values are listed in the following table.
| Value | Description |
|---|---|
| auto | Set the stack order equal to its parents. This is default |
| number | Set the stack order. Negative numbers are allowed |
| inherit | Inherit the z-index from the parent element |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
div#layer1 {<!--from ww w . j av a 2 s . c om-->
z-index: 3;
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 100px;
background-color: red;
border: 1px solid #000000;
padding: 5px;
}
div#layer2 {
z-index: 2;
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid #000000;
padding: 5px;
}
div#layer3 {
z-index: 1;
position: absolute;
top: 30px;
left: 30px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid #000000;
padding: 5px;
}
</style>
</head>
<body>
<div id="layer1"><h1>Layer One</h1></div>
<div id="layer2"><h1>Layer Two</h1></div>
<div id="layer3"><h1>Layer Three</h1></div>
</body>
</html>
The code above generates the following result.
