z-index的最小值和最大值？

Posted 2023-02-23

技术标签:

【中文标题】z-index的最小值和最大值？【英文标题】：Minimum and maximum value of z-index? 【发布时间】：2010-10-04 05:06:13 【问题描述】：

我的 html 页面中有一个 div。我根据某些条件显示此 div，但 div 显示在我指向鼠标光标的 HTML 元素后面。

我已经尝试了从 0 到 999999 的所有 z-index 值。谁能告诉我为什么会这样？

CSS的Z-INDEX属性有最小值还是最大值？

.divClass 
     position: absolute; 
     left: 25px; 
     top: 25px; 
     width: 320px;
     height: 300px; 
     z-index: 1000;

<table cellspacing="0" cellpadding="0" >
  <tr>
    <td>
      <asp:HyperLink ID="lnkProgram" runat="server"></asp:HyperLink>
    </td>
  </tr>
  <tr>
     <td>
         <div class="divClass">
           Some Data
         </div>
     </td>
  </tr> 
</table>

我正在使用 jQuery 通过 <asp:hyperlink> 显示和隐藏带有 .divClass onclick 的 div。

【问题讨论】：

这个问题可能与 z-index 无关。你能给出一些说明这种行为的示例 HTML 和 CSS 吗？您在哪些浏览器中遇到这种情况？ "尝试了 Z-INDEX 属性从 0 到 999999 的所有值"。我觉得这很难相信。 @Krumia 我没有，他可以用 JS 尝试 0-999999 之间的所有 z-index 值...只是一个选项... 实际上没有人在他的 CSS 中提到display: none？ @MarkBaijens 没有人提到它，因为问题说它是通过 jQuery 单击锚元素时显示的。但由于其他 3 位用户和您一起错过了这一点，因此我已将其编辑为不可能，以避免将来出现任何混淆。 【参考方案1】：

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

'z-index'

值：自动 | |继承

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

一些值类型可能有整数值（由表示）或实数值（表示为 )。实数和整数以十进制指定仅表示法。一个由一位或多位数字“0”组成 “9”。可以是，也可以为零或更多数字后跟一个点 (.) 后跟一位或多位数字。两个都整数和实数可能是前面有“-”或“+”表示标志。 -0 等价于 0 并且是不是负数。

请注意，许多属性允许整数或实数作为值实际上将值限制为一些范围，通常为非负值。

所以基本上 CSS 标准中的 z-index 值没有限制，但我猜大多数浏览器在实践中将其限制为带符号的 32 位值（-2147483648 到 +2147483647）（64 会有点偏离顶部，并且现在使用小于 32 位的任何东西都没有意义）

【讨论】：

请务必注意，Safari 3 上的最大 z-index 值为 16777271。这在 Safari 4 中已提高到 32 位标准，因此如果您针对的是较旧的浏览器，这只是一个问题。此外，即使在 Safari 3 中，任何高于 16777271 的内容都会受到限制，因此除非您使用非常大的 z-index 值来订购多个元素，否则您不应该有问题（即将一个元素设置为 z-index 值 2147483647将确保该元素在任何浏览器中都保持在最顶部，除非它与另一个 z-index > 16777271 的元素竞争。 @DoktorJ 有人知道为什么是 16777271 吗？它比 24 位无符号整数的限制多 56 倍，这似乎很奇怪。 @Jools according to webkit dev Eric Seidel，这是使用 24 位位域的结果 - log base 2 (lg) = lg(16777271) @Janosch 对不起，我不明白。 lg(16777271) 大于 24。我原以为 24 位位域不够大。 @Janosch，2^24 = 16777216。 16777271 因此需要 25 位。【参考方案2】：

我的测试表明 z-index: 2147483647 是最大值，在 OS X 的 FF 3.0.1 上进行了测试。我发现了一个整数溢出错误：如果您输入 z-index: 2147483648（即 2147483647 + 1），则该元素将落后于所有其他元素。至少浏览器不会崩溃。

要吸取的教训是，您应该注意不要为 z-index 属性输入过大的值，因为它们会环绕。

【讨论】：

因为这个（2147483647）是32位操作系统上带符号整数的最大正值... 如果值超过 2147483647，我认为该数字不会环绕 ...我认为浏览器更有可能将任何超过此值的数字视为一个常数值，例如0. 也许你的价值变成了负数……例如-2147483647 在超过 2147483648 的现代浏览器中不会将元素移到其他元素后面【参考方案3】：

32位整数的最大值：2147483647

另请参阅文档：https://www.w3.org/TR/CSS22/visuren.html#z-index （允许负数）

【讨论】：

【参考方案4】：

根据经验，我认为正确的最大值 z-index 是 2147483647。

【讨论】：

看来你错了。根据 Eric Poidokas 在 2009 年进行的测试，最大 z-index 值（没有溢出时丢弃元素的风险）为 2147483647。【参考方案5】：

这取决于浏览器（尽管所有浏览器的最新版本应最大为 2147483638），超过最大值时浏览器的反应也是如此。

【讨论】：

【参考方案6】：

Z-Index 仅适用于应用了position: relative; 或position: absolute; 的元素。如果这不是问题，我们需要查看示例页面才能更有帮助。

编辑：好医生已经给出了最完整的解释，但快速版本是最小值是 0，因为它不能是负数和最大值 - 好吧，你永远不需要超过 10大多数设计。

【讨论】：

我用过“z-index:-1;”在“下沉”一个元素之前，它不能被点击。这可能不是一个流行的解决方案，但它确实有效。 :P 我知道这有点晚了，但它也适用于 position:fixed。 AFAIK，z-index 值可以使用负整数。我想知道为什么我指定 z-index:1000，但浏览器告诉我实际的 z-index 是自动的。位置可以解决问题。【参考方案7】：

我发现，如果 z-index 不起作用，通常是因为它的父/兄弟没有指定的 z-index。

如果你有：

<div id="1">
    <a id="2" style="z-index:2"></a>
    <div id="3" style="z-index:1"></div>
    <button id="4"></button>
</div>

项目#3，甚至#4，可能会在点击/悬停空间中争夺#2，但如果您将#1 设置为z-index 0，则z-index 的兄弟姐妹现在将它们放在独立的堆栈中相同的堆栈，并将正确地进行 z-index。

这有一个有用且相当人性化的描述：http://foohack.com/2007/10/top-5-css-mistakes/

【讨论】：

当我们谈到这个话题时，另一个常见的问题是没有position: relative; 或类似的东西。其实，重读原帖即可。你是对的，这可能是他的问题。【参考方案8】：

结论最大 z-index 值为 2,147,483,647，超过此值转换为 2,147,483,647

‌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