The Value of #z-index | CSS-Tricks
▻https://css-tricks.com/the-value-of-z-index
To maintain a clean and scalable codebase, here are the golden rules for working with z-index:
– No magic numbers: Never use arbitrary values like 999 or 10001. If a number isn’t tied to a system, it’s a bug waiting to happen.
– Tokens are mandatory: Every z-index in your CSS should come from a token, either a global layer token or a local positioning token.
– It’s rarely the value: If an element isn’t appearing on top despite a “high” value, the problem is almost certainly its Stacking Context, not the number itself.
– Think in layers: Stop asking “how high should this be?” and start asking “which layer does this belong to?”
– Calc for connection: Use calc() to bind related elements together (like an overlay and its background) rather than giving them separate, unrelated tokens.
– Local contexts for local problems: Use local tokens (—z-top, —z-bottom) and internal stacking contexts to manage complexity within components.
#css
]]>