What it is

If you have worked with absolutely positioned elements then you should be familiar with z-index. Z-index is a CSS property that allows you to stack elements much like layers in Photoshop. This can quickly get confusing if you have no structural base to work from. Deciding what elements supersede other elements and how your website displays important information can be a cumbersome task and one that if not handled properly can cost you a lot of time and money in bug fixes later on.

Z-index blocking is a simple way to help you quickly organize and debug site issues that are related to improper stacking.

Lets use primary navigation as an example. If you have a hover menu then you want that menu to display overtop your main content. If you randomly set that to 500 and then later need a modal window that has an error message display and you set that to 450 the modal will display below the primary navigation and will look like a visual glitch.

With z-index blocking you assign spectrums with a range of 100 blocks in each range. You then assign labels to each spectrum and that will help you quickly understand where to place elements.

How to use it

I have built a basic example using 0-1000 as my global spectrum that I them break down into 10 sub-spectrums.

901-1000 – Error Message Windows (if modal)
801-900 – Modal Windows
701-800 – Primary Navigation
601-700 – Page Based Error Messaging
501-600 – Open
401-500 – Open
301-400 – Open
201-300 – Open
101-200 – Promotional/Advertising
1-100 – General Content

Conclusion

This is still a new concept but one that I think will help in the long run. It’s always important to plan early and test often.