Html z-index 的最小值和最大值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/491052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Minimum and maximum value of z-index?
提问by Sachin Gaur
I have a div in my HTML page. I am showing this div based on some condition, but the div is displaying behind the HTML element where I pointed the mouse cursor.
我的 HTML 页面中有一个 div。我根据某些条件显示此 div，但 div 显示在我指向鼠标光标的 HTML 元素后面。
I have tried all values for z-index from 0 - 999999. Can anyone tell me why this is happening?
我已经尝试了 z-index 从 0 - 999999 的所有值。谁能告诉我为什么会这样？
Is there any minimum or maximum value of Z-INDEX property of CSS?
CSS 的 Z-INDEX 属性是否有最小值或最大值？
.divClass {
position: absolute;
left: 25px;
top: 25px;
width: 320px;
height: 300px;
z-index: 1000;
}<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td>
<asp:HyperLink ID="lnkProgram" runat="server"></asp:HyperLink>
</td>
</tr>
<tr>
<td>
<div class="divClass">
Some Data
</div>
</td>
</tr>
</table>I am showing and hiding the div with .divClassonclick via the <asp:hyperlink>using jQuery.
我.divClass通过<asp:hyperlink>使用 jQuery使用onclick显示和隐藏 div 。
回答by Behnam Mohammadi
┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ Browser │ Max z─index value │ When exceeded, value changes to: │
╞══════════════════════╪═══════════════════╪══════════════════════════════════╡
│ Firefox 0 - 2 │ 2147483647 │ element disappears │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Firefox 3 │ 2147483647 │ 0 │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Firefox 4+ │ 2147483647 │ 2147483647 │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Safari 0 - 3 │ 16777271 │ 16777271 │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Safari 4+ │ 2147483647 │ 2147483647 │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Internet Explorer 6+ │ 2147483647 │ 2147483647 │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Chrome 29+ │ 2147483647 │ 2147483647 │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Opera 9+ │ 2147483647 │ 2147483647 │
└──────────────────────┴───────────────────┴──────────────────────────────────┘
回答by Tamas Czinege
http://www.w3.org/TR/CSS21/visuren.html#z-index
http://www.w3.org/TR/CSS21/visuren.html#z-index
'z-index'
Value: auto | <integer> | inherit
'z-索引'
值：自动 | <整数> | 继承
http://www.w3.org/TR/CSS21/syndata.html#numbers
http://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> 表示）。实数和整数仅以十进制表示法指定。<integer> 由一位或多位数字“0”到“9”组成。<number> 可以是 <integer>，也可以是零个或多个数字后跟一个点 (.) 后跟一个或多个数字。整数和实数都可以在前面加上“-”或“+”来表示符号。-0 等价于 0，不是负数。
请注意，许多允许整数或实数作为值的属性实际上将值限制在某个范围内，通常是非负值。
So basically there are no limitations for z-index value in the CSS standard, but I guess most browsers limit it to signed 32-bit values (?2147483648 to +2147483647) in practice (64 would be a little off the top, and it doesn't make sense to use anything less than 32 bits these days)
所以基本上 CSS 标准中的 z-index 值没有限制，但我猜大多数浏览器在实践中将其限制为有符号的 32 位值（？2147483648 到 +2147483647）（64 会有点偏高，而且它这些天使用小于 32 位的任何东西都没有意义）
回答by Ran
My tests show that z-index: 2147483647is the maximum value, tested on FF 3.0.1 for OS X.
I discovered a integer overflow bug: if you type z-index: 2147483648(which is 2147483647 + 1) the element just goes behind all other elements. At least the browser doesn't crash.
我的测试表明这z-index: 2147483647是最大值，在 OS X 的 FF 3.0.1 上测试过。我发现了一个整数溢出错误：如果您键入z-index: 2147483648（即 2147483647 + 1），则该元素将落后于所有其他元素。至少浏览器不会崩溃。
And the lesson to learn is that you should beware of entering too large values for the z-indexproperty because they wrap around.
要学习的教训是，您应该注意不要为z-index属性输入太大的值，因为它们会环绕。
回答by Santosh Khalse
The minimum value of Z-indexis 0; the maximum value depends on browser type.
Z-index的最小值为0；最大值取决于浏览器类型。
回答by Mohammad
Out of experience, I think the correct maximum z-indexis 2147483638.
根据经验，我认为正确的最大值z-index是 2147483638。
回答by pdr
It depends on the browser (although the latest version of all browsers should max out at 2147483638), as does the browser's reaction when the maximum is exceeded.
这取决于浏览器（尽管所有浏览器的最新版本的最大值应为 2147483638），超过最大值时浏览器的反应也是如此。
回答by magikMaker
It's the maximum value of a 32 bits integer: 2147483647
它是 32 位整数的最大值：2147483647
Also see the docs: https://www.w3.org/TR/CSS22/visuren.html#z-index(Negative numbers are allowed)
另请参阅文档：https: //www.w3.org/TR/CSS22/visuren.html#z-index（允许使用负数）
回答by roborourke
Z-Index only works for elements that have position: relative;or position: absolute;applied to them. If that's not the problem we'll need to see an example page to be more helpful.
Z-Index 仅适用于具有position: relative;或position: absolute;应用于它们的元素。如果这不是问题，我们需要查看示例页面才能更有帮助。
EDIT: The good doctor has already put the fullest explanation but the quick version is that the minimum is 0 because it can't be a negative number and the maximum - well, you'll never really need to go above 10 for most designs.
编辑：好医生已经给出了最完整的解释，但快速版本是最小值为 0，因为它不能是负数和最大值 - 好吧，对于大多数设计，你永远不需要超过 10。
回答by kcar
I have found that often if z-index isn't working its because its parent/siblings don't have a specified z-index.
我发现如果 z-index 不起作用，通常是因为它的父/兄弟姐妹没有指定的 z-index。
So if you have:
所以如果你有：
<div id="1">
<a id="2" style="z-index:2"></a>
<div id="3" style="z-index:1"></div>
<button id="4"></button>
</div>
item #3, or even #4, may be contesting #2 for the click/hover space, though if you set #1 to z-index 0, the siblings who's z-index put them in independant stacks now are in the same stack and will z-index properly.
项目#3，甚至#4，可能会在点击/悬停空间上与#2 竞争，但如果您将#1 设置为z-index 0，那么z-index 的兄弟姐妹现在将它们放在独立的堆栈中并且会正确地进行 z-index。
This has a helpful and fairly humanized description: http://foohack.com/2007/10/top-5-css-mistakes/
这有一个有用且相当人性化的描述：http: //foohack.com/2007/10/top-5-css-mistakes/
回答by Rocky
A user above says "well, you'll never really need to go above 10 for most designs."
上面的用户说“好吧，对于大多数设计，你永远不需要超过 10。”
Depending on your project, you may only need z-indexes 0-1, or z-indexes 0-10000. You'll often need to play in the higher digits...especially if you are working with lightbox viewers (9999 seems to be the standard and if you want to top their z-index, you'll need to exceed that!)
根据您的项目，您可能只需要 z-indexes 0-1 或 z-indexes 0-10000。您通常需要以更高的数字播放...尤其是当您使用灯箱查看器时（9999 似乎是标准，如果您想超过他们的 z-index，则需要超过该值！）
