What the heck, z-index? | Josh W. Comeau

The best overview of z-index and stacking contexts that I've come across, plus it keeps getting better as Josh extends the useful tools section 👏👏

Top of the tips is isolation: isolate, a very useful CSS function that I never remember; it effectively resets the stacking context, which means it's particularly useful for component-based UI structures.

Also a worthy shout-out to the CSS Stacking Context Inspector plugin (also available for Chrome). It's already helped me locate a rogue stacking context being created by a global opacity attribute (of all things 😂).

Explore Other Notes

Older ➡

Layout love and drumming

A follow-up to Andy's previous explanation of his compound grid layout in which they explain their logic behind a 4 + 5 compound grid a bit more. It's neat, but this description is what really caught …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>The best overview of z-index and stacking contexts that I've come across, plus it keeps getting better as Josh extends the useful tools section …</p> </body> </html>
  • Murray Adcock.
Journal permalink