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

我有一个div在我的HTML页面。我基于某些条件显示这个div，但是div显示在我指向鼠标光标的HTML元素后面。

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

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>

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

443128 次浏览
小开

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

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

小开

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

“z - index”

价值: auto | <integer>|继承

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

某些值类型可能包含整型 值(由<integer>表示)或 实数值(表示为 & lt; number>)。实数和 整数用十进制指定 符号。一个& lt; integer> 由一个或多个数字“0”到 “9”。& lt; number>可以是 整数，或者它可以是零或者 更多的数字后面跟着一个点(.) 后面跟着一个或多个数字。这两个 整数和实数可能是 前加"-"或"+"表示 的迹象。-0等价于0，是 不是负数

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

所以基本上在CSS标准中没有对z-index值的限制，但我猜大多数浏览器在实践中将其限制为带符号的32位值(−2147483648到+2147483647)(64会有点超出顶部，而且现在使用任何低于32位的值都没有意义)

小开
我的测试表明z-index: 2147483647是最大值，在FF 3.0.1 OS X上测试。 我发现了一个整数溢出的错误:如果您键入z-index: 2147483648(这是2147483647 + 1)，元素只是在所有其他元素后面。至少浏览器不会崩溃

从中可以学到的教训是，您应该注意不要为z-index属性输入太大的值，因为它们会被换行。

小开

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

小开

这取决于浏览器(尽管所有浏览器的最新版本的最大值应该是2147483638)，也取决于超过最大值时浏览器的反应。

小开

上面的一位用户说:“好吧，大多数设计都不需要超过10。”

根据您的项目，您可能只需要0-1的z索引，或者0-10000的z索引。你经常需要使用更高的数字，特别是当你使用灯箱查看器时(9999似乎是标准，如果你想超过它们的z指数，你需要超过它!)

小开

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

参考文档:https://www.w3.org/TR/CSS22/visuren.html#z-index (允许负数)

小开

虽然INT_MAX可能是最安全的赌注，WebKit显然在内部使用双精度，因此允许非常大的数字(以一定的精度)。LLONG_MAX例如工作良好(至少在64位Chromium和WebkitGTK中)，但将四舍五入为9223372036854776000。

(尽管您应该仔细考虑真的是否真的需要这么多z指标…)。

小开

我发现如果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。

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

小开

z指数最大值为2147,483,647，大于此值则为2147,483,647

‌浏览器 最大 超过最大值
铬>= 29 2147483647年 2147483647年
9 .歌剧 2147483647年 2147483647年
= 6 2147483647年 2147483647年
4 . Safari浏览器 2147483647年 2147483647年
Safari = 3 16777271年 16777271年
火狐浏览器>= 4 2147483647年 2147483647年
火狐浏览器= 3 2147483647年 0
Firefox = 2 2147483647年 Bug:标签隐藏

在BrowserStack中测试的所有值。

小开

有一个超级简单的方法来写z-index的最大值和最小值，使用calc()。

最大的值:

#some-id {
z-index: calc(9e999)
}

最小值:

#some-id {
z-index: calc(-9e999)
}

EYZ0浏览器兼容性(<number>值支持)

  • Firefox - 48+
  • Safari - 7+
  • Ie - 9+
  • 歌剧- 18+
  • Chrome - 31+
  • 边- 12+

提交答案