z-index: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The z-index property sets the stack order of the boxes.

When you set this property, the relative, absolute, or fixed value must be specified for the position property.


#example {
position: absolute;
top: 10px;
left: 30%;
z-index: 0;
}
Property Value Explanation
z-index number or auto the box with the higher number will appear in front

The default is "auto".

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

div {
width: 200px;
height: 100px;
position: absolute;
}

#example1 {
z-index: 1;
background-color: #85b9e9;
top: 100px;
left: 50px;
}
#example2 {
z-index: 2;
background-color: #ffd78c;
top: 150px;
left: 200px;
}
#example3 {
z-index: 0;
background-color: #bde9ba;
top: 50px;
left: 150px;
}

</style>

</head>
<body>

<div id="example1">The first box</div>
<div id="example2">The second box</div>
<div id="example3">The third box</div>

</body>
</html>
Output
Example pagenew window