The Value of z-index | CSS-Tricks

"In most projects, once you hit a certain size, the z-index values become a mess of "magic numbers", a chaotic battlefield of values, where every team tries to outdo the others with higher and higher numbers."

"The core issue isn't a technical one, but a lack of visibility. In a large project with multiple teams, you don't always know what else is floating on the screen. There might be a toast notification from Team A, a cookie banner from Team B, or a modal from the marketing SDK."

"This is how we end up with magic numbers, these arbitrary values that aren't connected to the rest of the application. They are guesses made in isolation, hoping to win the "arms race" of z-index values."

The z-index property controls element stacking order for UI components like modals, toasts, and dropdowns. In large projects with multiple teams, z-index management becomes problematic as developers use arbitrary high values without understanding what other elements exist on the page. This creates an uncoordinated arms race where each team attempts to outdo others with higher numbers. The fundamental issue stems from poor visibility across teams rather than technical limitations. Developers resort to guessing high values in isolation, hoping their elements appear on top, resulting in unmaintainable magic numbers disconnected from application logic.

Read at CSS-Tricks