Basic positioning
As they do in maths, axis play an important role in CSS positioning, the Y axis is vertical, the X axis is horizontal and the z axis is an imaginary arrow that points directly at you from your monitor (see below).
Introduction to Z-Index
With your CSS z-index sets the order of the layers or <div> tags however you prefer to imagine it. z-index is set by the number you put in the z-index property in your CSS file, for example if you compare z-index:1; and z-index:10; the element with z-index set to 10 will be in front of the element with z-index set to 1, using this example it is very easy to order basic elements on your web page however there are a few things to consider as the more you use z-index the more complicated it gets.
What to consider before using Z-Index
Although z-index is not a difficult property to understand, due to false assumptions it can cause confusion for beginners. This confusion occurs because z-index will only work on an element whose position property has been explicitly set to absolute, fixed or relative.
It’s not that simple
Z-index seems so simple: elements with a higher z-index are stacked in front of elements with a lower z-index, as long as they have their position property set, right? Well, actually, no. This is part of the problem with z-index. It appears so simple, so most designers and developers don’t take into account the in depth rules.
Every element in an HTML document can be either in front of or behind every other element in the document. This is known as the stacking order. The rules to determine this order are pretty clearly defined in the spec, but as I’ve already stated, they’re not fully understood by most developers.
When the z-index and position properties aren’t involved, the rules are pretty simple: basically, the stacking order is the same as the order of appearance in the HTML.
When you introduce the position property into the mix, any positioned elements (and their children) are displayed in front of any non-positioned elements. (To say an element is “positioned” means that it has a position value other than “position: static;”, for example: “position:relative;”, “position:absolute;”, etc.)
Finally, when z-index is involved, things get a little trickier. At first it’s natural to assume elements with higher z-index values are in front of elements with lower z-index values, and any element with a z-index is in front of any element without a z-index, but it’s not that simple. First of all, z-index only works on positioned elements. If you try to set a z-index on an element with no position specified, it will do nothing. Secondly, z-index values can create stacking contexts, and now suddenly what seemed simple just got a lot more complicated.
Stacking order within the same stacking content
Here are the basic rules to determine stacking order within a single stacking context (from the back to the front):
- The stacking context’s root element
- Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
- Non-positioned elements (ordered by appearance in the HTML)
- Positioned elements (and their children) with a z-index value of
auto(ordered by appearance in the HTML) - Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
Note: Positioned elements with negative z-indexes are ordered first within a stacking context, which means they appear behind all other elements. Because of this, it becomes possible for an element to appear behind its own parent, which is normally is impossible. This will only work if the element’s parent is in the same stacking context and is not the root element of that stacking context. A great example of this is a little demo Nicolas Gallagher’s CSS drop-shadows without images.
Global stacking order
With a firm understanding of how and when new stacking contexts are formed as well as a grasp of the stacking order within a stacking context, figuring out where a particular element will appear in the global stacking order isn’t so bad.
The key to avoid getting tripped up is being able to spot when new stacking contexts are formed. If you’re setting a z-index of a billion on an element and it’s not moving forward in the stacking order, take a look at the <div> tags that are containing it and see if any of its parents form stacking contexts. If they do, your z-index of a billion isn’t going to do you any good.
Examples
Below link to a demo which shows a simple but effective z-index content stack where you can change the css and see the orders change http://codepen.io/Tipue/pen/pbEio
Conclusion
Stacking contexts are a complex topic. This article did not attempt to cover every tiny detail on that topic, but instead i have attempted to provide a solid idea of how a web page’s stacking contexts are affected by the z-index which, when fully understood, becomes a powerful CSS tool.
Beginning developers and designers should now have a good understanding of this property and avoid some of the common problems that people can run into and open doors to a number of creative ways to implement this CSS property into their designs.