我有一支技术全面、经验丰富的小型团队，专注高效交付中等规模外包项目，有需要外包项目的可以联系我
你现在是不是正在打那场熟悉的 z-index 仗？
就是那种——元素死活盖不上去，你开始疯狂加 0：999、9999、99999……直到某一刻它“终于”浮上来了，你还得装作这一切都在掌控之中。
我懂。
但我得告诉你：CSS 里有个核按钮，你可能压根不知道。
我就是在调一个“死活不肯压住一切”的弹窗时撞见它的。那天我的z-index已经飙到99999，我都准备再加一个 9 了——结果我发现了一个让我当场笑出声的东西：
CSS 里真的有“∞（无穷大）”。
你先别急，给你两秒钟消化一下。
那一刻，我的世界观塌了一半
事情是这样的：凌晨两点（你懂的），我在翻一些偏冷门的 CSS 文档，然后我看到calc(infinity)就那么大大方方地躺在那里。
很淡定。 很自然。 像它一直都在，只是等我终于路过它。
我的第一反应是：“这肯定是玩笑吧？” 第二反应是：“我现在就要用它把东西搞崩。”
于是我干了每个合理开发者都会干的事：我开始到处扔 infinity。
结束 z-index 军备竞赛
还记得那个弹窗吗？以前我这样写：
Before：
.modal { z-index: 999999; /* 求求了，上去吧 */ }然后改成这样：
After：
.modal { z-index: calc(infinity); }从此你那张写着z-index: 99999999的蓝卡片？——没了。 我这张z-index: calc(infinity)的紫卡片？——永远在上面。
但这里有个反转：z-index里的 infinity 并不是“真的无限”，它会落到一个具体值：2,147,483,647（32 位有符号整数的上限）。
所以理论上，如果有人跟你一样离谱，直接写：
z-index: 2147483647;那你们俩就打成平手。此时谁赢？看谁在 HTML 里后出现，后面的默认压前面的。
粉色（infinity）和青色（2147483647）会变成同一个 z-index。 因为青色在 HTML 更靠后，所以它赢。两者都能碾压蓝色的 99999。
不过说真的——能随口报出 2147483647 的人，现实里不多。
现场演示：它真的能压一切
你可以这样试：
<div class="regular-modal">Regular Modal (z-index: 9999)</div> <div class="infinity-modal">Infinity Modal (z-index: calc(infinity))</div>.regular-modal { position: fixed; z-index: 9999; background: blue; } .infinity-modal { position: fixed; z-index: calc(infinity); background: purple; }结局非常简单：紫色永远赢。
你就算把蓝色加到999999999，也只是在用更大的数字表达同一种无力。
那我能不能做一个“无限大”的 div？
当然我试了。
因为我就是那种会试的人。
.big-boi { width: calc(infinity * 1px); height: calc(infinity * 1px); }结果？我失望得很认真。
CSS 的 infinity 并不会给你一个真的“无限”。它只是——浏览器能给的“尽可能大”。
而且更离谱的是：不同浏览器、不同系统、甚至不同属性，算出来的“最大”可能都不一样。
在某些环境里，它会变成一个大到可笑的矩形：看起来像一个网页里突然出现了“一个小国家那么大的 div”。
所以你要记住一句话：
CSS 的 infinity 更像“浏览器的最大努力”，不是数学意义的无穷。
动画走向无穷：瞬移 Bug
你以为把动画推向 infinity 会很酷？
比如：
.rocket { animation: launch 10s; } @keyframes launch { to { translate: calc(infinity * 1px); } }结果很魔幻：元素会直接跳到终点，然后在那儿“假装飞了 10 秒”。
道理也很直：你朝无穷迈一步还是无穷，迈一万步还是无穷。浏览器干脆不演了：直接给你终局。
更狠的是：如果你把延迟设成 infinity——那动画就等于永远不开始：
.procrastinator { animation-delay: calc(infinity * 1s); }这才是真正的“拖延症组件”。
Infinity 什么时候真的有用？
先说一个你一定写过的场景：胶囊按钮。
以前我们这样糊弄：
.pill-button { border-radius: 9999px; /* 够大就行 */ }现在你可以这样写：
.pill-button { border-radius: calc(infinity * 1px); }效果基本一样，但表达完全不同。
看到9999px，我会想：为什么是 9999？有什么讲究？ 看到infinity，我瞬间明白：“我就是要最大。”
同样的逻辑也适用于把内容挪到屏幕外（比如无障碍的 screen-reader-only 文本）：
.screen-reader-only { position: absolute; left: calc(infinity * -1px); }它比“随手写个 -9999px”更像人话。 未来的你会感谢现在的你。
那些没人提前告诉你的怪知识
快速扫一遍：
除以 0 会得到 infinity：
calc(1 / 0)→calc(infinity)还有负无穷：
calc(-infinity)或calc(infinity * -1)只能在 calc() 里用，不能直接写
z-index: infinity;（得写calc(infinity)）主流浏览器对
<calc-keyword>（infinity / -infinity）支持已经相对成熟（但你仍然要注意业务环境和兼容性策略）
真正重要的不是“黑科技”，是心态
说实话，这个 infinity 常量不会让你一夜之间写出更高级的 CSS。
它真正改变的是你的表达方式。
以前我写z-index: 99999，是在猜。是在赌。是在祈祷。 现在我写calc(infinity)，是在清晰地告诉所有人：
“我要它压在最顶层，别跟我扯。”
这种“表达明确的极端”，就是它的价值。
实用清单：哪些地方该用 calc(infinity)？
它最适合用在这些“我就是要最大”的场景：
胶囊按钮：
border-radius: calc(infinity * 1px)，告别魔法数字彻底挪出屏幕：
left: calc(infinity * -1px)用于无障碍内容关键覆盖层：
z-index: calc(infinity)用于 modal / toast / urgent overlay动画终点：需要“直接到最大值”的瞬移效果
自解释代码：把意图写明白，而不是留下一串神秘数字
真正好处不是技术本身——而是告诉读代码的人：我需要绝对最大。
轮到你了
现在就去你的 CSS 里找一个地方——你用了一串夸张的大数字。
把它换成calc(infinity)试试。
代码是不是更好读了？ 意图是不是更清楚了？
如果是，恭喜，你刚给自己的 CSS 词汇表升级了一条。 如果不是——也没关系，至少你学会了一个可以在群里装一下的怪知识。
总之，欢迎你一起在有限的浏览器里，思考一下“无穷”到底有多无穷。
全栈AI·探索：涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏，案例驱动实战学习，点击二维码了解更多详情。
最后：
CSS终极指南
Vue 设计模式实战指南
20个前端开发者必备的响应式布局
深入React:从基础到最佳实践完整攻略
python 技巧精讲
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集
)
