关于css:最大的-zindex-值是多少

明天看到一个投票挺有意思的，投票问题是“What’s the largest z-index value you can specify?”，能够指定的最大 z-index 值是多少？咱们在开发中常应用的有相似 0、1、2、-9999、9999 等值，然而很少会去思考 z-index 属性的范畴。

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

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

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

auto：盒子不会创立一个新的部分层叠上下文。盒子在以后层叠上下文的层叠等级是 0。
<integer>：盒子在以后层叠上下文的层叠等级就是 <integer> 的值。盒子还会创立一个部分层叠上下文。这意味着该元素的后辈元素不会和该元素的内部元素比拟 z-index。

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 至 +2147483647)(64 位有点离谱，当初应用任何低于 32 位的值都没有意义)。

‌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

古代浏览器中能够间接应用 calc() 函数来疾速测试。

在浏览器 DevTools > Elements > Styles 手动设置款式：

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

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

// max
z-index 2147483648

// min
z-index -2147483648

z-index 值能够是任何整数值，最大值取决于不同浏览器的外部实现，最平安的值是 32 位有符号整数，即 2147483647。然而，它容许有限值。有些浏览器容许应用 INT_MAX 作为最平安的最大值，而 WebKit 浏览器则容许应用 LLONG_MAX 值，例如 Chromium。

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

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

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

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

关于css:最大的-zindex-值是多少

1.z-index 属性

2.W3C 文档中的形容

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

4. 如何疾速测试

5. 总结