How we look at the stacking order of our projects, how we choose z-index values, and more importantly, the implications of those choices.

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

Managing z-index values in large projects often devolves into an 'arms race' of arbitrary magic numbers. The solution is tokenizing z-index values using CSS custom properties in :root, creating a named layer system (e.g., --z-toast: 100, --z-popup: 200). This approach improves maintainability, prevents conflicts between teams, and makes debugging easier. The post also covers using calc() to bind related elements, local tokens (--z-top, --z-bottom) for internal component stacking, and the importance of stacking contexts. A companion npm library (z-index-token-enforcer) is introduced to enforce the token system via Stylelint, ESLint, and CLI tools.

The Value of z-index

We’re Not Talking About Stacking Context… But…