z指数的最小值和最大值

I have a DIV in my HTML page. I am showing this DIV based on some condition. But DIV is displaying behind any HTML element where I pointed the mouse cursor.
I have tried all value for Z-INDEX property from 0 - 999999.

Can anyone tell me why this is happening?

Is there any minimum or maximum value of Z-INDEX property of CSS?
For example, Following HTML is defined in an ascx control:

我的HTML页面有一个DIV。我根据某些条件显示这个DIV。但是DIV在任何HTML元素的后面显示，我在那里指向鼠标光标。我尝试了0 - 999999中Z-INDEX属性的所有值。谁能告诉我为什么会这样吗?CSS的Z-INDEX属性是否有最小或最大值?例如，ascx控件中定义了以下HTML:

<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>

And the CSS is:

CSS是:

.divClass
{
     position: absolute; 
     left: 25px; 
     top: 25px; 
     width: 320px;
     height: 300px; 
     z-index: 1000; 
     display: none;
}

And I am showing and hiding specific DIV for Hyperlink using +Jquery which is on main page.

我在主页上使用+Jquery显示和隐藏了超链接的特定DIV。

12 个解决方案

#1

273

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

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

'z-index'

“z - index”

Value: auto | <integer> | inherit

值:auto | |继承

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

http://www.w3.org/TR/CSS21/syndata.html数字

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.

有些值类型可能具有整数值(以表示)或实数值(以表示)。实数和整数只在十进制表示法中指定。由一个或多个“0”到“9”的数字组成。可以是，也可以是零或多个数字，后面跟着一个点(.)，后面跟着一个或多个数字。整数和实数的前面都可以加上“-”或“+”来表示符号。-0等于0，不是负数。

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.

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

So basically there are no limitations for z-index value in the CSS standard, but I guess most browsers limit it to signed 32-bit values (−2147483648 to +2147483647) in practice (64 would be a little off the top, and it doesn't make sense to use anything less than 32 bits these days)

基本上没有限制z - index CSS标准的价值,但我想大多数浏览器限制它签署了32位值(+ 2147483647−2147483648)在实践中(64都有点,不合理使用任何低于32位这些天)

#2

254

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

#3

146

My tests show that z-index: 2147483647 is the maximum value, tested on FF 3.0.1 for OS X. I discovered a integer overflow bug: if you type z-index: 2147483648 (which is 2147483647 + 1) the element just goes behind all other elements. At least the browser doesn't crash.

我的测试显示z-index: 2147483647是最大值，在FF 3.0.1上测试OS x。我发现了一个整数溢出bug:如果输入z-index: 2147483648(即2147483647 + 1)，那么元素就会落后于所有其他元素。至少浏览器不会崩溃。

And the lesson to learn is that you should beware of entering too large values for the z-index property because they wrap around.

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

#4

It depends on the browser (although the latest version of all browsers should max out at 2147483638), as does the browser's reaction when the maximum is exceeded.

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

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

#5

Out of experience, I think the correct maximum z-index is 2147483638.

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

#6

The minimum value of Z-index is 0; the maximum value depends on browser type.

z指标的最小值为0;最大值取决于浏览器类型。

#7

It's the maximum value of a 32 bits integer: 2147483647

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

Also see the docs: https://www.w3.org/TR/CSS22/visuren.html#z-index (Negative numbers are allowed)

也可以查看文档:https://www.w3.org/TR/CSS22/visuren.html#z-索引(允许负数)

#8

Z-Index only works for elements that have position: relative; or position: absolute; applied to them. If that's not the problem we'll need to see an example page to be more helpful.

Z-Index只适用于具有相对位置的元素;或位置:绝对;适用于他们。如果这不是问题，我们需要看到一个示例页面更有帮助。

EDIT: The good doctor has already put the fullest explanation but the quick version is that the minimum is 0 because it can't be a negative number and the maximum - well, you'll never really need to go above 10 for most designs.

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

#9

I have found that often if z-index isn't working its because its parent/siblings don't have a specified z-index.

我发现，如果z索引不起作用，通常是因为它的父/姐妹没有指定的z索引。

So if you have:

所以如果你有:

<div id="1">
    <a id="2" style="z-index:2"></a>
    <div id="3" style="z-index:1"></div>
    <button id="4"></button>
</div>

item #3, or even #4, may be contesting #2 for the click/hover space, though if you set #1 to z-index 0, the siblings who's z-index put them in independant stacks now are in the same stack and will z-index properly.

项目#3，或者甚至是#4，可能是点击/盘旋空间的第2号，但是如果您将#1设置为z-index 0，那么由z-index将它们放在独立堆栈中的兄弟姐妹现在处于相同的堆栈中，并且会正确地使用z-index。

This has a helpful and fairly humanized description: http://foohack.com/2007/10/top-5-css-mistakes/

这篇文章有一个非常有用且相当人性化的描述:http://foohack.com/2007/10/top-5-css- errors es/

#10

A user above says "well, you'll never really need to go above 10 for most designs."

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

Depending on your project, you may only need z-indexes 0-1, or z-indexes 0-10000. You'll often need to play in the higher digits...especially if you are working with lightbox viewers (9999 seems to be the standard and if you want to top their z-index, you'll need to exceed that!)

根据您的项目，您可能只需要z-index 0-1，或者z-index 0-10000。你经常需要使用更高的数字，尤其是当你使用lightbox查看器时(9999似乎是标准，如果你想要超过他们的z-index，你需要超过这个数字!)

#11

A curious fact, if you use an editor like Firebug and put a big number in z-index the browser will replace the biggest inserted value by the maximum value

一个奇怪的事实是，如果您使用像Firebug这样的编辑器并在z索引中放入一个大的数字，那么浏览器将会以最大的值替换最大的插入值。

#12

While INT_MAX is probably the safest bet, WebKit apparently uses doubles internally and thus allows very large numbers (to a certain precision). LLONG_MAX e.g. works fine (at least in 64-Bit Chromium and WebkitGTK), but will be rounded to 9223372036854776000.

虽然INT_MAX可能是最安全的选择，但WebKit显然在内部使用double，因此允许非常大的数字(在一定的精度上)。LLONG_MAX例如:工作得很好(至少在64位的Chromium和WebkitGTK中是这样)，但是会被四舍五入到9223372036854776000。

(Although you should consider carefully whether you really, really need this many z indices…).

(虽然你应该仔细考虑你是否真的，真的需要这么多z指标…)

#1

273