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. Read more…

• CSS Property: z-index