IAB Z-index Guidelines

- 2 min read

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.

Author

Cody Craven enjoys sharing tidbits of information that he learns through his life-long journey developing websites and configuring web servers.

When at work, Cody can often be found banging his head against his keyboard for hours days weeks-on-end trying to solve technical issues that would otherwise prevent his teammates from creating Member value at AAA.

All content that Cody contributes to this site are his own ideas and do not necessarily represent AAA's positions or opinions.