问题描述
我的 HTML 页面中有一个 DIV 。我根据一些条件显示这个 DIV 。但 DIV 正在显示任何指向鼠标光标的 HTML 元素。我已尝试所有的值为 0 – 999999 的 Z-INDEX 属性。任何人都可以告诉我为什么会发生这种情况？ CSS 的 Z-INDEX 属性是否有最小值或最大值？例如，以下 HTML 在 ascx 控件中定义：
<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>
CSS 是：
.divClass
{
position: absolute;
left: 25px;
top: 25px;
width: 320px;
height: 300px;
z-index: 1000;
display: none;
}
我正在主页上使用+ Jquery 显示和隐藏特定的 DIV for Hyperlink 。
最佳解决方案
http://www.w3.org/TR/CSS21/visuren.html#z-index
‘z-index’
Value: auto | <integer> | inherit
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.
所以基本上对 CSS 标准中的 z-index 值没有任何限制，但是我猜想大多数浏览器在实践中将其限制为 32 位值 (-2147483648 到+2147483647)(64 位将是顶部的一点，有意义的是，使用这些天数少于 32 位的东西)
次佳解决方案
┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ 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 │
└──────────────────────┴───────────────────┴──────────────────────────────────┘
第三种解决方案
我的测试显示，z-index: 2147483647 是最大值，在 OS X.1.1 上测试了 OS X. 我发现了一个整数溢出错误：如果你键入 z-index: 2147483648(这是 2147483647 + 1)，元素就会落后于所有其他元素。至少浏览器不会崩溃。
要学习的是，您应该注意为 z-index 属性输入太大的值，因为它们环绕。
第四种方案
这取决于浏览器 (尽管所有浏览器的最新版本应该最大为 2147483638)，浏览器的反应超出最大值时也是如此。
http://www.puidokas.com/max-z-index/
第五种方案
没有经验，我认为正确的最大 z-index 是 2147483638 。
第六种方案
它是 32 位整数的最大值：2147483647
另请参阅文档：https://www.w3.org/TR/CSS22/visuren.html#z-index(允许负数)
第七种方案
Z-index 的最小值为 0; 最大值取决于浏览器类型。
第八种方案
Z-Index 仅适用于应用了 position: relative; 或 position: absolute; 的元素。如果这不是问题，我们需要看到一个示例页面更有帮助。
编辑：好医生已经做出了最充分的解释，但是快速版本是最小值是 0，因为它不能是负数，最大限度是 – 对于大多数设计，你永远不需要超过 10 。
第九种方案
我发现，如果 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/
第十种方案
上面的用户说，「对于大多数设计，你永远不会需要超过 10」 。
根据您的项目，您可能只需要 z-indexes 0-1 或 z-indexes 0-10000 。你经常需要玩更高的数字… 特别是如果你正在使用灯箱观众 (9999 似乎是标准的，如果你想要顶部他们的 z-index，你将需要超越！)
参考文献
注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。