CSS 中 z-index 的最小值和最大值是多少？

z-index属性在CSS中用来控制一个元素在页面上垂直堆叠的顺序。z-index只能影响定位元素（即position属性值为relative, absolute, fixed, 或者 sticky的元素）。

z-index的值是整数，可以是正数、负数或者0。

• 最小值： z-index的最小值是负无限，理论上没有具体的数字限制，但实际上它受到浏览器的限制。在实际应用中，通常会使用负值，比如-1, -10, -100等来将元素放置在堆叠顺序的较低层次。

• 最大值： 同样的，理论上的最大值是正无限，但实际使用时也受到浏览器的限制。在大多数现代浏览器中，最大值通常是2147483647（这个数字是32位整数能表示的最大正数）。

例如，如果你有一个模态对话框，你可能会给它一个非常高的z-index值，比如1000，以确保它覆盖在其他页面内容之上。反之，如果你想让某个元素显示在大多数其他元素之下，你可能会给它指定一个负的z-index值。

需要注意的是，z-index的作用是相对的，它只和同一堆叠上下文中的其他元素进行比较。创建新的堆叠上下文会影响z-index的行为，例如设置opacity小于1或者应用transform等也会创建新的堆叠上下文。

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

'z 索引'

值：自动| <整数> |继承

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 （允许负数）

结论 z 索引最大值为 2,147,483,647，超过此值将转换为 2,147,483,647

‌浏览器

最大限度

超过最大值

铬> = 29

2,147,483,647

2,147,483,647

歌剧 >= 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

狩猎 = 3

16,777,271

16,777,271

火狐 >= 4

2,147,483,647

2,147,483,647

火狐 = 3

2,147,483,647

0

火狐 = 2

2,147,483,647

Bug：标签隐藏

所有值均在 BrowserStack 中测试。