All About.... Z-Index?

Solution 1:

Z-index is the property that determines which html element appears on top of another html element when they overlap. The basic idea is that the element with the highest z-index is "on top".

By default, elements have a z-index of zero, but setting the css property on one element to 1, and another to 5 will make the latter element be "on top" of the former, if they overlap.

So far, so simple, but there are several things to look out for.

One, as already mentioned in another answer, is that z-index only has an effect if the element is positioned with position absolute, fixed or relative. (i.e. the css property "position"). An unpositioned element has a z-index of zero.

To complicate things further (and in my experience the area that is often not understood) is the concept of the stacking context. More info can be found in articles such as this. In short though, each time you explicitly set a new z-index, you start a new stacking context. All child elements of the one on which the z-index was set are now in this new stacking context, which may be above or below a stacking context on another unrelated element.

What does this stacking context mean? It means that an element with a z-index of 100 is not necessarily on top of an element with z-index of 1. If they are in different stacking contexts, only the z-indexes of the stacking contexts themselves matters.

Solution 2:

I would suggest to have a look at this property on SmashingMagzine.

The Z-Index CSS Property: A Comprehensive Look

It covers all nuts and bolts of this property with great examples and demonstrations.

Solution 3:

the most important thing to remember is that z-index works ONLY if the element has position relative, absolute or fixed

Solution 4:

I'm not entirely sure what you're asking but for the most-part you only ever need to use z-index if you're doing complicated styling e.g. hover tooltips or dropdown navigations, simply to ensure that they display over other page content.

For basic designing you should generally be avoiding using the position and z-index properties as you can usually achieve the same effects with better performance and browser compatibility with just floats etc.

The Smashing Magazine link posted by Sarfraz is an excellent article on the topic and a good point of reference if you're still struggling to understand the functionality of the property.