IAB Z-index Guidelines

The Interactive Advertising Bureau (IAB) sets guidelines for ad unit types for its members. When developing a website you’ll save yourself many headaches by playing by their rules.

Without further ado, the z-index guidelines that the IAB sets as recommendations for page content and ad units:

< 0
- Background elements
0 - 4,999
- Main content and ads that do not expand
5,000 - 1,999,999
- Expanding ad units
5,000,000 - 5,999,999
- Expanding portions of page navigation elements or any other items that should appear over all ad units

Multiple times per year, I find myself needing to quickly refer to the IAB’s z-index guidelines for ads. However IAB tends to bury this reference within an Excel workbook that I must first download (after I guess which one it is). If you’d like to find this information yourself, take a look at the IAB New Ad Portfolio page.

How to apply IAB z-index guidelines

To be compliant with IAB guidelines, most of your DOM elements should have a z-index of 4,999 or below.

However, when you have alerts, expanding navigation, or other elements that must overlap for user experience, use a z-index between 5,000,000 and 5,999,999 – yeah it’s excessive I know.

It’s extremely common for well-meaning developers that are not aware of these industry guidelines to correct enormous z-index values. To avoid regressions being created in your code, I’d suggest adding a comment in your CSS whenever you use a value in the 5,000,000-5,999,999 range, maybe something like this:

.expanding-nav {
    /*
    The IAB forced me to use this huge z-index, it's not my fault!
    See https://cravencode.com/post/essentials/iab-z-index-guidelines/
    */
    z-index: 5999999;
}

Guidelines changes

While the IAB has kept these values relatively unchanged (I swear there used to be a 2,000,000-4,999,999 range), they are absolutely able to change these guidelines. If you find that my values are out of date please let me know @codycraven.