Z-INDEX的最小值和最大值

Question

Z-INDEX的最小值和最大值

我的HTML页面中有一个DIV.我根据某些条件展示了这个DIV.但DIV显示在我指向鼠标光标的任何HTML元素后面.
我已经尝试了从0到999999的Z-INDEX属性的所有值.

任何人都可以告诉我为什么会发生这种情况？

CSS的Z-INDEX属性是否有任何最小值或最大值？
例如,以下HTML在ascx控件中定义:

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

Run Code Online (Sandbox Code Playgroud)

CSS是:

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

Run Code Online (Sandbox Code Playgroud)

我正在使用主页上的+ Jquery显示和隐藏特定的DIV for Hyperlink.

Answer 1

Beh*_*adi 357

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

Run Code Online (Sandbox Code Playgroud)

你是怎么过来的？ (37认同)
对于那些感兴趣的人,`2,147,483,647 = 2 ^ 31 - 1`.这是一个梅森素数. (25认同)
我相信他的意思是消极的. (4认同)

Answer 2

Tam*_*ege 299

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

"z索引"

价值:汽车| <整数> | 继承

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

重要的是要注意Safari 3上的最大z-index值是16777271.这在Safari 4中被提升到32位标准,所以如果你的目标是旧浏览器,这只是一个问题.此外,即使在Safari 3中,16777271以上的任何内容也会受到限制,因此,除非您使用荒谬的大型z-index值来订购多个元素,否则您应该没有问题(即将一个元素设置为z-index值2147483647将确保元素在任何浏览器中保持最高位置,除非它与另一个也具有z-index> 16777271的元素竞争. (17认同)
@DoktorJ有谁知道为什么它是16777271？看起来奇怪的是,它比24位无符号整数的极限高出56. (5认同)
@Janosch，2^24 = `16777216`。“16777271”因此需要 25 位。 (3认同)
@Jools [根据 webkit dev Eric Seidel](https://lists.webkit.org/pipermail/webkit-dev/2009-May/007708.html)，这是使用 24 位位域的结果 - `log基数 2 (lg) = lg(16777271)` (2认同)
@Janosch对不起,我不明白.lg(16777271)大于24.我原以为24位位域不够大. (2认同)

Answer 3

Ran*_*Ran 153

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

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

因为这(2147483647)是32位操作系统上有符号整数的最大正值... (54认同)
如果值超过2147483647,我认为这个数字不会*包围*我认为浏览器更有可能只将这个值上的任何数字视为常数值,例如0. (4认同)
也许你的价值变得消极......例如-2147483647 (3认同)
在现代浏览器中,超过2147483648并不会将元素移动到其他元素之后 (3认同)

Answer 4

San*_*lse 22

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

易于复制和粘贴:2147483647 (13认同)
实际上,z-index可以是负数.具有负z索引的定位元素首先在堆叠上下文中排序,因此它们将出现在所有其他元素的后面.另请参阅文档:https://www.w3.org/TR/CSS22/visuren.html#z-index (3认同)

Answer 5

Moh*_*mad 21

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

好像你错了.根据Eric Poidokas在2009年进行的测试,最大z-index值(没有丢失元素溢出的风险)是2147483647. (5认同)

Answer 6

pdr*_*pdr 21

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

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

Answer 7

mag*_*ker 21

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

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

Answer 8

rob*_*rke 14

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

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

我知道这有点晚了,但它适用于位置:固定也是如此. (17认同)
AFAIK,您可以为z-index值设置负整数. (7认同)
我用过"z-index:-1;" 之前"下沉"一个元素,以便它不能被点击.它可能不是一个流行的解决方案,但确实有效.:P (5认同)

Answer 9

小智 6

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

Run Code Online (Sandbox Code Playgroud)

对于点击/悬停空间,第3项甚至第4项可能正在竞争#2,但是如果你将#1设置为z-index 0,那么z-index将它们放在独立堆栈中的兄弟姐妹现在在同一个堆栈中并将z-index正确.

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

当我们谈论这个话题时,另一个常见的问题是没有```position:relative;```或类似的东西. (4认同)

Answer 10

小智 5

上面的用户说：“嗯，对于大多数设计，您真的不需要超过10。”

根据您的项目，您可能只需要z-index 0-1或z-indexes 0-10000。您通常需要使用更高的数字...特别是如果您正在与灯箱查看器一起使用（9999是标准格式，并且如果要使其z-index达到最高，则需要超过该数字！）

Answer 11

Beh*_*adi 5

结论最大 z-index 值为 2,147,483,647，超过此值将转换为 2,147,483,647

?浏览器	最大值	超过最大值
铬 >= 29	2,147,483,647	2,147,483,647
歌剧 >= 9	2,147,483,647	2,147,483,647
浏览器 >= 6	2,147,483,647	2,147,483,647
野生动物园 >= 4	2,147,483,647	2,147,483,647
野生动物园 = 3	16,777,271	16,777,271
火狐 >= 4	2,147,483,647	2,147,483,647
火狐 = 3	2,147,483,647	0
火狐 = 2	2,147,483,647	错误：标签隐藏

在 BrowserStack 中测试的所有值。

归档时间：	16 年，7 月前
查看次数：	345435 次
最近记录：	5 年，9 月前