Once you've started using CSS positioning to layout your pages you'll probably run across an apparent problem with this technique. When you place your elements on the page, unless you're very careful, they may overlap one another. This is fine if you want the last element to be the one on top. But what if you want the first or second element to be above the others? To do this, you need the z-order property of CSS.
If you've ever built graphics using a program like MS Paint or the graphics tools in Word and PowerPoint then, chances are, you've seen something like z-index in action. In these programs, you can highlight the object(s) that you've drawn, and choose an option "Send to back" or "Bring to front". This is effectively setting the z-index of those objects.
What is z-index
When you're using CSS positioning to position elements on the page, you need to think in virtual 3-D. Each element on the page can be layered on top or beneath any other element. The z-index determines where in the stack each element is. I like to think of the elements as pieces of paper, and the Web page is a collage. Where I lay the paper is determined by positioning, and how much of it shows through the other elements is the z-index.
The higher a z-index value is, the more likely it will be on top when the page displays. A z-index can be negative. This tells the browser to put it lower than other elements on the page (with lower negative numbers being lower on the stack).
How to Use z-index
Use z-index with any element that you have position information on. You need to have the position attribute set, usually to position:absolute; But the specification says that z-index will work with relatively positioned elements as well.
I've created a simple page with several div elements positioned on top of one another. Take a look at the CSS to see the positioning and z-index values I used. I like to use widely different z-index values, such as:
- 100 for my top-most element
- 0 for my middle element
- -100 for my bottom element
That way, if I decide I need additional elements stacked in other places, I can still stack them.
You can also give two elements the same z-index value. If these elements are stacked, they will display in the order they are written in the HTML, with the last element on top.
