DEV Community


Discussion on: An Incredibly Easy Way to Manage Layers in SCSS

richarddillman profile image
Richard Dillman

I run across our old nemesis z-index every so often and love your answer! I thought I'd expand on this just a bit with a view from advertising.

Google sponsors a group that manages advertisement guidelines, one of which is z-index. This is a good rule to follow as most 3rd party content providers will also be following it. This allows all our various projects to know what to expect.
From the Interactive Advertising Bureau
Z-Index < 0:

  • Background and-or hidden elements

Z-Index 0 - 4,999:

  • Main Content

Z-Index 5,000 - 1,999,999:

  • Expanding content such as pushdowns or accordions.
  • The entire expandable unit should be set within this range

Z-Index 5,000,000 - 5,999,999:

  • Expanding site navigation elements
  • Sticky elements
  • Drop down navigation
  • site warnings
  • Basically, anything that is allowed to cover content.
  • Only the expanding portion of elements should be included on this level.

I do love me some standards!

seibmacdaniel profile image
Mac Daniel Author

Good to know! I work on content websites driven by ads. I think that we can implement these z-index ranges as comments in the _layers.scss to group things accordingly.

Thanks man!