z-index: ***;

  • 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".


<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;



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


Example pagenew window