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 […]
  • 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 […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.