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

时间：2009-01-29 09:50:21

标签： html css z-index

我的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通过.divClass使用<asp:hyperlink> onclick显示和隐藏div。

13 个答案:

答案 0 :(得分：318)

┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ 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                       │
└──────────────────────┴───────────────────┴──────────────────────────────────┘

答案 1 :(得分：296)

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

  

<强> '的z-index'

     

价值：自动| ＆LT;整数＆GT; |继承

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

  

某些值类型可能包含整数   值（由＆lt;整数＆gt;表示）或   实数值（表示为   ＆LT;数＆GT）。实数和   整数以十进制指定   只有符号。 ＆lt;整数＆gt;   由一个或多个数字“0”组成   “9”。 A＆lt; number＆gt;可以是一个   ＆lt; integer＆gt;，或者它可以是零或   更多数字后跟一个点（。）   后跟一个或多个数字。都   整数和实数可能是   前面加上“ - ”或“+”表示   标志。 -0相当于0并且是   不是负数。

     

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

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

答案 2 :(得分：150)

我的测试显示z-index: 2147483647是最大值，在OS 3.0的FF 3.0.1上测试过。 我发现了一个整数溢出错误：如果你输入z-index: 2147483648（这是2147483647 + 1），该元素就会落后于所有其他元素。至少浏览器不会崩溃。

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

答案 3 :(得分：22)

Z-index 的最小值为 0 ;最大值取决于浏览器类型。

enter image description here

答案 4 :(得分：21)

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

答案 5 :(得分：21)

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

http://www.puidokas.com/max-z-index/

答案 6 :(得分：21)

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

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

答案 7 :(得分：12)

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

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

答案 8 :(得分：5)

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

根据您的项目，您可能只需要z-index 0-1或z-indexes 0-10000。你经常需要玩更高的数字...特别是如果你正在使用灯箱观众（9999似乎是标准，如果你想要超越他们的z-index，你需要超过它！）< / p>

答案 9 :(得分：5)

我发现，如果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 :(得分：0)

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

（虽然你应该仔细考虑是否真的，真的需要这么多的z索引......）。

答案 11 :(得分：0)

一个奇怪的事实，如果您使用像Firebug这样的编辑器并在z-index中放入一个大数字，浏览器将用最大值替换最大插值

答案 12 :(得分：0)

[Chrome >= 29, Opera >= 9, IE >= 6, Safari >= 4, Firefox >=4]

z-index的最大值是2,147,483,647，大于此值将转换为2,147,483,647

相关问题
最新问题