stack order of the boxes


z-index: ***;

Browser
Internet Explorer Firefox Opera

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