Stacking elements with Z-index

Z-index is the CSS style that controls how images or divs stack over each other. To understand z-index and how it works, you have to understand how to implement it first. Z-index will only work when you specify that a certain element has a defined position. It doesn't have to be a certain one, but it can be Fixed, Relative, or Absolute. You have to specify this for every element that you want to control, otherwise the default is set to auto, giving you no control at all. Once that is defined, you can specify the stacking order. First, lets set up our html:

<body>  
<div id="container">  
  <div id="sidebar"></div>
  <div id="content">
    <div id="diamond"><img src="diamond.png" width="500" height="500" /></div>
    <div id="spade"><img src="spade.png" width="500" height="500" /></div>
    <div id="club"><img src="club.png" width="500" height="500" /></div>
  </div>
</div>  
</body>  

I set it up so that we have 3 images inside of their own divs, so that you can see how the divs stack when you make certain specifications. In this example we will stack them in order, as they are in the html.

#diamond {
position:absolute;  
z-index:auto;  
}
#spade {
position:absolute;  
z-index:1;  
left:125px;  
top:125px;  
}
#club {
position:absolute;  
z-index:2;  
left:250px;  
top:250px;  
}

Specifying that they have an absolute position allows me to control how far they are from the left and top inside of the container div. I sett each one to be farther to the right by adding 125px to the left and top CSS values for each div. The reason I did this is so that you can easily see how they stack on top of each other. Diamond is on the bottom, because its z-index is auto. Then, spade comes next, followed by club on top.

If we decide to change the spade's z-index to 0, it won't go below the diamond. Auto is always on bottom, so you would have to change the value of the spade to a negative number to make it go below. That will make it so that the spade is below the diamond.

#diamond {
position:absolute;  
z-index:auto;  
}
#spade {
position:absolute;  
z-index:-1;  
left:125px;  
top:125px;  
}
#club {
position:absolute;  
z-index:-1;  
left:250px;  
top:250px;  
}

If we set both the spade and the club's z-index value to -1, the spade will be on the bottom, because it is the first element.

To make the club go below the spade, we will have to set the z-index to -2. You can think of z-index as a value on an integer line. If you use positive numbers, the element with the highest number will be on top. If you use negative numbers, the the number closest to 0 will be on top.

#diamond {
position:absolute;  
z-index:auto;  
}
#spade {
position:absolute;  
z-index:-1;  
left:125px;  
top:125px;  
}
#club {
position:absolute;  
z-index:-2;  
left:250px;  
top:250px;  
}

Conclusion

You can do some creative things with z-index. Having the ability to stack images can give you flexibility, and having the ability to determine the stacking order gives you a lot of control over your designs.