为何开发者使用9999、1001等高z-index值而非1、2等小数值？

Great question—this is one of those frontend habits that feels random until you get into the real-world headaches it solves! Let’s break down the main reasons:

• Avoid conflicts with component libraries
  Most popular UI libraries (like Bootstrap, Ant Design, or Material UI) already assign mid-range z-index values to their core components: modals might use z-index: 1050, dropdowns 1000, tooltips 1070, etc. If you use a small value like 10 or 50, your custom elements (say, a global notification bar or a custom modal) could easily get buried under library components. Slapping on 9999 is a quick way to guarantee your element stays on top without having to dig through the library’s docs to check every existing z-index.

• Build in a "safety buffer" for future changes
  Imagine you set z-index: 10 for a popup today. Next week, you add a new tooltip that needs to sit above that popup—now you have to bump the tooltip to 11. Then a month later, you add a full-screen loader that needs to be above everything else, so you set it to 12. This back-and-forth gets tedious fast. Using a huge value like 9999 means you (or other developers on your team) won’t have to adjust this z-index later when adding new elements—you’ve already built in enough space so nothing else will accidentally jump above it.

• Historical precedent and industry inertia
  Back in the early days of frontend development, there were no standard z-index conventions. Developers started using large values to make sure their critical elements (like error alerts or login modals) didn’t get covered by other content. Over time, this became a common habit—new devs see it in legacy code or tutorials, so they adopt it too. It’s less about "best practice" and more about "this works, and everyone else does it."

• Bypass tricky stacking context issues
  z-index doesn’t just work by raw number—your element’s stacking context (determined by parent elements with position, opacity, transform, etc.) can override even higher values. Sometimes figuring out why your z-index: 50 element isn’t showing above a z-index: 10 element takes way more time than just setting it to 9999. For quick fixes, especially when you’re on a tight deadline, the brute-force large value is a tempting shortcut.

Of course, this approach has downsides: if multiple elements all use 9999, you’ll still get conflicts, and it can make your CSS harder to maintain long-term. But for most everyday scenarios, it’s a simple, low-effort way to avoid common z-index headaches.

内容的提问来源于stack exchange，提问作者Roni Dey