最大的 z-index 值是多少？

發表於2023-09-19
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 至 +2147483647)(64位有點離譜，現在使用任何低於32位的值都沒有意義)。

3.不同瀏覽器最大值參考

‌BrowserMaximumMore Than Maximum
Chrome >= 292,147,483,6472,147,483,647
Opera >= 92,147,483,6472,147,483,647
IE >= 62,147,483,6472,147,483,647
Safari >= 42,147,483,6472,147,483,647
Safari = 316,777,27116,777,271
Firefox >= 42,147,483,6472,147,483,647
Firefox = 32,147,483,6470
Firefox = 22,147,483,647Bug: 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);
}
  1. 在瀏覽器 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實驗室」微信公眾號討論。
圖片

相關文章