Z Index Organization in CSS
In my experience, the Z Index property is not a primary consideration for web developers. The property might be ignored entirely throughout development, and configured only when there is a problem.
This approach is reasonable for smaller projects, but can often be difficult to manage in larger projects with a number of third-party CSS libraries. We ran into this issue on one of my projects at work, so I came up with a plan for how to organize Z Indexes on large scale projects.
Overview
For our projects, we will use Z Index values from 0 to 9,999 inclusive. Although the Z Index value can support values within a signed 8-bit integer range, this is a much larger range than any website should ever need.
0000–1999: Elements and Components
2000–2999: Element and Component Drop Downs
3000–3999: Secondary Navigation
4000–4999: Header / Footer
5000–5999: Primary Navigation
6000–6999: Full Screen Features
7000–7999: Special Cases
8000–8999: Modals / Dialog Windows
9000–9999: Notifications
Elements and Components: 0000 – 1999
This range is for all html elements and website components including text, images, and content blocks. For example, if an image on a page should have a lower Z Index than the text on the page, each of those Z Index values could be set within this range.
Element and Component Drop Downs: 2000–2999
This range should be for drop downs that are one layer above the elements and components from the previous range. For example, a text box might have a drop down with suggestions, and each of those Z Index values could be set within this range.
Secondary Navigation: 3000–3999
This range is for secondary navigation, which is navigation for a single page or a subset of pages. For example, an account page might have its own navigation bar in addition to the site-wide navigation bar. The page-specific navigation Z Index values could be set within this range.
Header / Footer: 4000–4999
This range is for the header and footer elements of your website. The header and footer Z Index values can overlap, because the elements themselves should never overlap.
Primary Navigation: 5000–5999
This range is for primary navigation, which will generally be a bar at the top of your website with links to other pages. While secondary navigation is only used for some pages, primary navigation should be visible on all pages.
Not all websites will have both a header and a primary navigation, but if they do the primary navigation should be above the header, footer, and secondary navigation.
Full Screen Features: 6000–6999
This range is exclusively for full screen features like a text editor that has a full screen mode. If an element is to be full screen, it should be displayed above all previous range intervals.
Special Cases: 7000–7999
This range is for special cases of elements that should be displayed above all other elements. For example, on one of our projects a user can log in as a super user with extra permissions. If they are logged in as such a user, a bar appears at the bottom of their screen reminding them that they are logged in as a super user.
Modals / Dialog Windows: 8000–8999
This range should be used for modals and dialog windows, such as a pop up dialog that asks a user to confirm some action before continuing.
An example modal / dialog window would be the bootstrap CSS library modal.
Notifications: 9000–9999
This range should be used for notifications that might pop up on any page, and should therefore be displayed above all other elements. This includes full screen features and dialog windows.
An example notification would be one from the JavaScript Toastr library. Notifications should have the highest Z Index values because no element should ever be above them.
Notifications vs Modals / Dialog Windows
The primary difference between notifications and modals / dialog windows is persistence. Notifications should pop up on your screen in response to some event, like getting a private message on Facebook. When this notification appears, is should automatically disappear after a certain period of time. Modals and dialog windows should also pop up on your screen in response to some event, like clicking the delete button on a medium post. However, when this modal / dialog window appears it should require some kind of user interaction before disappearing. For example, you might click the “Confirm” button on an “Are you sure you want to delete this post?” modal / dialog window.
Edge Cases
While this method will help organize Z Index values on websites, it is not always enough to have a higher Z Index. Philip Walton discusses this in greater detail in a blog post found here, which should be taken into consideration when building web pages.
