566

我的 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" 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>

我通过使用 jQuery使用.divClassonclick显示和隐藏 div。<asp:hyperlink>

4

10 回答 10

336

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

'z-索引'

值：自动 | <整数> | 继承

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

某些值类型可能具有整数值（由 <integer> 表示）或实数值（由 <number> 表示）。实数和整数仅以十进制表示法指定。<integer> 由一个或多个数字“0”到“9”组成。<number> 可以是 <integer>，也可以是零个或多个数字，后跟一个点 (.)，后跟一个或多个数字。整数和实数前面都可以用“-”或“+”表示符号。-0 相当于 0，不是负数。

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

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

于 2009-01-29T10:11:14.123 回答
170

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

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

于 2009-05-13T07:35:52.070 回答
23

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

于 2010-08-18T16:43:30.533 回答
23

它是 32 位整数的最大值：2147483647

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

于 2012-06-01T12:32:24.190 回答
21

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

于 2010-10-07T15:14:08.420 回答
17

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

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

于 2009-01-29T10:06:34.023 回答
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/  

于 2013-06-07T20:13:41.787 回答
6

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

‌浏览器 最大 超过最大值
铬 >= 29 2,147,483,647 2,147,483,647
歌剧 >= 9 2,147,483,647 2,147,483,647
IE >= 6 2,147,483,647 2,147,483,647
野生动物园 >= 4 2,147,483,647 2,147,483,647
野生动物园 = 3 16,777,271 16,777,271
火狐 >= 4 2,147,483,647 2,147,483,647
火狐 = 3 2,147,483,647 0
火狐 = 2 2,147,483,647 错误：标签隐藏

在 BrowserStack 中测试的所有值。

于 2020-08-26T07:00:13.587 回答
5

上面的一位用户说：“嗯，对于大多数设计，你永远不需要超过 10。”

根据您的项目，您可能只需要 z-indexes 0-1 或 z-indexes 0-10000。您经常需要以较高的数字播放...特别是如果您使用灯箱查看器（9999 似乎是标准，如果您想超过他们的 z-index，您需要超过它！）

于 2010-12-01T06:27:52.523 回答
0

虽然INT_MAX可能是最安全的选择，但 WebKit 显然在内部使用双精度数，因此允许非常大的数字（达到一定精度）。LLONG_MAX例如工作正常（至少在 64 位 Chromium 和 WebkitGTK 中），但将四舍五入为 9223372036854776000。

（尽管您应该仔细考虑您是否真的需要这么多 z 索引……）。

于 2013-02-26T16:11:49.993 回答