z-index
Last updated on
The z-index property is a way to position objects in the third dimension with CSS. This is commonly used in components like cookie banners, pop-ups and header navigation overlays. The higher the value (or the integer) then the “closer” it is to you. The z-index can be applied to most elements apart from those who have a position default value of static. If multiple elements have a z-index then the one with the highest value will be on top.
Possible values
- auto – this defaults to the same level as the parent element
- integer – sets the given value a stack level
As well as the integer being positive (above 0) it can also be a negative value, therefore a negative value would be considered a lower priority.
Before using this CSS property HTML elements have a natural stacking order regardless. If no items have the z-index applied then this is the natural stacking order:
- Background and borders of the elements
- In order of appearance the elements with negative stacking
- Block-level elements that are not positioned or floated, based on the order of appearance
- Floated elements that are not positioned, based on the order of appearance
- In order of appearance the inline elements
- Finally positioned elements, based on the order of appearance
The natural stacking order will also apply if two elements have the same z-index.
How to use the z-index property
As mentioned in the introduction the property can only be applied to position elements that are using the position value absolute, fixed, relative, or sticky. So apart from the default value of static, any other positioned elements can use the z-index value.
What is the max and min value?
The limit is typically considered to be around 2,147,483,647 (either positive or negative). However, this is not an official figure as it is not clearly mentioned in the CSS specs. It is based on the fact that the maximum value for an int32 is 2,147,483,647.
Bad practice
The problem with the z-index value is that it has developed a bad reputation. As you can imagine it is easy to get carried away and apply the maximum value of 2,147,483,647 to your element as that is the most important element on the page. However, this isn’t how we should write CSS as much as we shouldn’t overuse the !important value.
The other problem with the property is that when using third-party plugins and add-ons is that they often go for high values to avoid being overlapped by other elements.
There is nothing “wrong” with having 999 as a value on one element even if there aren’t 998 other elements that are in 3D space but if you’re looking for better code quality then it is better to respect the property and set a reasonable value.
Browser support
This CSS property has existed for many years so browser support is not something to worry about, it is supported across all major browsers without prefixes.
z-index not working
Sometimes the z-index can result in unexpected outcomes or it appears as not working, there are a couple of steps we can take to resolve this.
1. Check the position of the element
Often the first place to start is looking at the position property for the element you’re trying to apply the z-index to. If it is set to static then this will likely be the cause of your issues. You will need to set it to either static, relative, fixed or sticky.
2. Check the level of the parent item
As much as the element takes on board its own values it also considers what its parent element values are. So if the parent level is set at 1 and then a child element that is set at 3 and then we had another separate element that is set at 2 if the two-parent elements overlap then the child element of the first item wouldn’t show.
More CSS guides
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects