z-index-coordinate-matrixlisted

# Z-Index Coordinate Matrix `z-index: 99999` is not a value, it's a confession — someone couldn't find why an element rendered underneath something and kept adding zeros until it didn't. The next person adds one more zero. Depth in an interface is a floor plan with a small, fixed number of storeys: things behind the content, the content, things that stick while scrolling, the header, things that pop out of components, things that take over the page, and things that must be visible above even those. Name the storeys once, give each a number with room between them, and every element declares which storey it lives on. A layering bug then becomes "this element is on the wrong floor" or "this element is trapped inside a room" — both diagnosable — instead of an arms race. ## The matrix ```css :root { --z-subground: -10; /* parallax planes, watermark type, grid canvas lines — behind content */ --z-ground: 0; /* text, tables, columns, cards — the baseline */ --z-rail-sticky: 100; /* sticky meta rail, sidebar, table headers — overlap content while scrolling */ --z-navigation: 200; /* fixed/sticky primary header — over sticky rails */ --z-disclosure: 300; /* dropdowns, popovers, hand-built tooltips — pop out of components */ --z-modal: 400; /* dialogs, drawers, full-page overlays and their backdrops */ --z-critical: 500; /* system alerts, toasts, tooltips over modals — nothing above this */ } ``` Seven tiers, gaps of 100, nothing else