Z-INDEX的最小值和最大值-Java 学习之路

430

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

12 回答

149
我发现，如果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/
回复于 2024-04-29T10:41:08+08:00
20

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

要学习的教训是，你应该注意为 z-index 属性输入太大的值，因为它们会环绕 .

回复于 2024-04-29T10:41:08+08:00

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

回复于 2024-04-29T10:41:08+08:00

21

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

回复于 2024-04-29T10:41:08+08:00
5

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

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

回复于 2024-04-29T10:41:08+08:00
11

Z-Index仅适用于已应用 position: relative; 或 position: absolute; 的元素 . 如果那个's not the problem we' ll需要看一个示例页面更有帮助 .

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

回复于 2024-04-29T10:41:08+08:00
289

上面的用户说“好吧，对于大多数设计，你永远不需要超过10 . ”

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

回复于 2024-04-29T10:41:08+08:00
20

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

回复于 2024-04-29T10:41:08+08:00
4

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

'z-index'值：auto | <整数> |继承

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位的东西是有意义的）

回复于 2024-04-29T10:41:08+08:00
289

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

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

回复于 2024-04-29T10:41:08+08:00
0

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

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

回复于 2024-04-29T10:41:08+08:00
19

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

回复于 2024-04-29T10:41:08+08:00

Z-INDEX的最小值和最大值

12 回答

相关问题