z-index的最小值和最大值？

http://www.w3.org/TR/CSS21/visuren.html#z-index

'z-index' 值：自动 | <整数> |继承

http://www.w3.org/TR/CSS21/syndata.html#numbers

某些值类型可能具有整数值（由 表示）或实数值（由 表示）。实数和整数仅以十进制表示法指定。 由一个或多个数字“0”到“9”组成。 可以是 ，也可以是零个或多个数字，后跟一个点 (.)，后跟一个或多个数字。整数和实数前面都可以用“-”或“+”表示符号。 -0 相当于 0，不是负数。请注意，许多允许整数或实数作为值的属性实际上将值限制在某个范围内，通常是非负值。

所以基本上 CSS 标准中的 z-index 值没有限制，但我猜大多数浏览器在实践中将其限制为带符号的 32 位值（-2147483648 到 +2147483647）（64 会有点偏离顶部，而且它这些天使用小于 32 位的任何东西都没有意义）

---

我的测试表明 z-index: 2147483647 是最大值，在 OS X 的 FF 3.0.1 上进行了测试。我发现了一个整数溢出错误：如果您输入 z-index: 2147483648（即 2147483647 + 1），则该元素将落后于所有其他元素.至少浏览器不会崩溃。

要吸取的教训是，您应该注意不要为 z-index 属性输入过大的值，因为它们会环绕。

---

根据经验，我认为正确的最大值 z-index 是 2147483647。

---

它是 32 位整数的最大值：2147483647

另请参阅文档：https://www.w3.org/TR/CSS22/visuren.html#z-index（允许使用负数）

---

这取决于浏览器（尽管所有浏览器的最新版本应最大为 2147483638），超过最大值时浏览器的反应也是如此。

---

Z-Index 仅适用于应用了 position: relative; 或 position: absolute; 的元素。如果这不是问题，我们将需要查看示例页面以提供更多帮助。

编辑：好医生已经给出了最完整的解释，但快速版本是最小值是 0，因为它不能是负数和最大值 - 好吧，对于大多数设计，你永远不需要超过 10。

---

结论 最大 z-index 值为 2,147,483,647，超过此值转换为 2,147,483,647

‌Browser Maximum More Than Maximum Chrome >= 29 2,147,483,647 2,147,483,647 Opera >= 9 2,147,483,647 2,147,483,647 IE >= 6 2,147,483,647 2,147,483,647 Safari >= 4 2,147,483,647 2,147,483,647 Safari = 3 16,777,271 16,777,271 Firefox >= 4 2,147,483,647 2,147,483,647 Firefox = 3 2,147,483,647 0 Firefox = 2 2,147,483,647 Bug : 标签隐藏

在 BrowserStack 中测试的所有值。

---

我发现如果 z-index 不起作用，通常是因为它的父/兄弟没有指定的 z-index。

因此，如果您有：

<div id="1">
    <a id="2" style="z-index:2"></a>
    <div id="3" style="z-index:1"></div>
    <button id="4"></button>
</div>

项目#3，甚至#4，可能会与#2 争夺点击/悬停空间，但如果将#1 设置为z-index 0，则z-index 的兄弟姐妹现在将它们放在独立的堆栈中，它们在同一个堆栈中并将正确地进行 z-index。

这有一个有用且相当人性化的描述：http://foohack.com/2007/10/top-5-css-mistakes/  

---

上面的一位用户说：“嗯，对于大多数设计，你永远不需要超过 10。”

根据您的项目，您可能只需要 z-indexes 0-1 或 z-indexes 0-10000。您经常需要以较高的数字播放...特别是如果您使用灯箱查看器（9999 似乎是标准，如果您想超过他们的 z-index，您需要超过它！）

---

存在使用 calc() 为 z-index 写入最大值和最小值的超级简单方法。

最大值：

#some-id {
  z-index: calc(9e999)
}

最小值：

#some-id {
  z-index: calc(-9e999)
}

calc() 浏览器兼容性（ 值支持）

火狐 - 48+

野生动物园 - 7+

浏览器 - 9+

歌剧 - 18+

铬 - 31+

边缘 - 12+

---

虽然 INT_MAX 可能是最安全的选择，但 WebKit 显然在内部使用双精度数，因此允许 非常大 的数字（达到一定精度）。 LLONG_MAX 例如工作正常（至少在 64 位 Chromium 和 WebkitGTK 中），但将四舍五入为 9223372036854776000。

（尽管您应该仔细考虑您是否真的需要这么多 z 索引……）。

---