Why should I care ?
THe CSS z-index property is a very useful one but it’s not used very much in many websites. The purpose of this property is to achieve something like:
Or like this:
So the purpose of the CSS property z-index is to absolutely position an HTML element on top of the other elements on the screen. This is mostly useful to implement dialogs, information or navigation banners, information bubbles, light boxes, menus, . The contents below the element shown on a higher layer are not visible or only partially visible.
How does the world look like without z-index ?
Without the z-index property, the stacking of HTML elements still happens. It’s just much difficult to control it. The elements are positioned using a default stacking order:
- Background and borders of the root element
- Non-positioned, non-floating block elements in the order they appear in your code
- Non-positioned floating block elements in the order they appear in your code
- Non-positioned inline elements in the order they appear in your code
- Positioned elements in the order they appear in your code
Even though you can still somehow figure out how to position the elements in the code and assign positioning in order to help, it’s clearly a waste of time and I doubt most web developers can actually really figure it out without a lot of trial and error.
So the summary is that if you want to display overlapping components in a specific stacking you need to use the CSS z-index property.
So how do I use it ?
There is nothing easier: just add the following CSS property to a rule matching an element:
Instead of 10 you can use any other integer value. If you use a negative value, it will be displayed below all non-positioned, non-floating block elements but above the background and borders of the root element.
So it’s fairly easy. But there are a few things you have to know about it.
The first one is that z-index only works on elements which do not have a static position i.e. one of the following:
position: relative; position: absolute; position: fixed;
Additionally to an integer number you can also use auto. The element will then get the same stack order as its parent.
You should also keep in mind that it is important how the elements are nested. A child element can never be higher that the elements which are higher than its parent.
A few examples please…
Here are a few example to help you understand how stacking works with and without z-index.
Elements without z-index
Here is a good example from Mozilla:
Stacking with z-index but static positioning
When you forget that z-index has no effect with static positioning you will get something like this:
Although you’d have expected the opposite. By setting the positioning to relative, you get:
If DIV #2 is a child of DIV #1 and DIV #3 is higher than DIV #1, no matter how high the z-index of DIV #2 is will not be displayed higher than DIV #3.
Here the DIVs have the following z-index:
- DIV #1: 1
- DIV #2: 999
- DIV #3: 3
And although DIV #2 has a z-index of 999 it is not shown on top of DIV #3 because it is a child of DIV #1 which is below DIV #3.
someElement.style.position = "relative"; someElement.style.zIndex = "10";