最大的 z-index 值是多少？

今天看到一个投票挺有意思的，投票问题是“What's the largest z-index value you can specify?”，可以指定的最大 z-index 值是多少？我们在开发中常使用的有类似0、1、2、-9999、9999等值，但是很少会去考虑 z-index 属性的范围。

那这个最大值到底是多少呢？和投票结果是否一致？本文将从属性介绍、官方文档定义、不同浏览器可取值来分析。

1.z-index属性

z-index: auto | <integer> | inherit;

z-index 属性可以被设置为关键字 auto 或 <integer>。

• auto：盒子不会创建一个新的局部层叠上下文。盒子在当前层叠上下文的层叠等级是 0。
• <integer>：盒子在当前层叠上下文的层叠等级就是 <integer> 的值。盒子还会创建一个局部层叠上下文。这意味着该元素的后代元素不会和该元素的外部元素比较 z-index。

2.W3C 文档中的描述

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

Some value types may have integer values (denoted by <integer>) or real number values (denoted by <number>). Real numbers and integers are specified in decimal notation only. An <integer> consists of one or more digits "0" to "9". A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign. -0 is equivalent to 0 and is not a negative number.

Note that many properties that allow an integer or real number as a value actually restrict the value to some range, often to a non-negative value.

某些值类型可能有整数值（用 <integer> 表示）或实数值（用 <number> 表示）。实数和整数只能用十进制表示。一个 <整数> 由一个或多个数字 "0 "至 "9 "组成。<number> 既可以是一个 <integer>，也可以是零位或多位数，后面加一个点（.），再加一位或多位数。整数和实数前面都可以紧接一个"-"或 "+"来表示符号。-0相当于0，不是负数。

请注意，许多允许使用整数或实数作为数值的属性实际上将数值限制在一定范围内，通常是非负值。

因此，在 CSS 标准中，z-index 值基本上没有限制，大多数浏览器在实践中将其限制为32位的有符号值(-2147483648 至 [phone])(64位有点离谱，现在使用任何低于32位的值都没有意义)。

3.不同浏览器最大值参考

‌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: tag hidden

4.如何快速测试

现代浏览器中可以直接使用 calc() 函数来快速测试​。

1. 在浏览器 DevTools > Elements > Styles 手动设置样式：

.max {
  postion: absolute;
  height: 200px;
  z-index: calc(9e999);
}
.min {
  postion: absolute;
  height: 200px;
  z-index: calc(-9e999);
}

2. 在浏览器 DevTools > Elements > Computed面板查看计算后的样式属性值：

// max
z-index 2147483648

// min
z-index -2147483648

5.总结

z-index值可以是任何整数值，最大值取决于不同浏览器的内部实现，最安全的值是 32 位有符号整数，即 2147483647。但是，它允许无限值。有些浏览器允许使用 INT_MAX 作为最安全的最大值，而 WebKit 浏览器则允许使用 LLONG_MAX 值，例如 Chromium。

在 Chromium 内部的内存中，他们用来存储的数据类型是最大整数值。因此，它应该是内存和数字类型所能容纳的最大值。

可以通过此链接https://www.youtube.com/shorts/7s0POgLzASY或者点击公众号左下角“阅读原文”查看 ，油管请自备🪜。

最后留一个小问题：如何快速查找最高的z-index元素？欢迎在评论区留言、转发、讨论。

欢迎关注「FED实验室」微信公众号讨论。