当前位置:  开发笔记 > 编程语言 > 正文

Z-INDEX的最小值和最大值

如何解决《Z-INDEX的最小值和最大值》经验,为你挑选了10个好方法。

我的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; 
}

CSS是:

Some Data

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



1> Behnam Moham..:
???????????????????????????????????????????????????????????????????????????????
? 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                       ?
???????????????????????????????????????????????????????????????????????????????


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

2> Tamas Czineg..:

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

"z索引"

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

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

某些值类型可能具有整数值(由表示)或实数值(由表示).实数和整数仅以十进制表示法指定.由一个或多个数字"0"到"9"组成.可以是,也可以是零或更多位,后跟一个点(.)后跟一个或多个数字.整数和实数都可以在前面加上" - "或"+"来表示符号.-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的元素竞争.
@DoktorJ有谁知道为什么它是16777271?看起来奇怪的是,它比24位无符号整数的极限高出56.
@Janosch对不起,我不明白.lg(16777271)大于24.我原以为24位位域不够大.

3> Ran..:

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

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


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

4> Santosh Khal..:

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

在此输入图像描述


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

5> Mohammad..:

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


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

6> pdr..:

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

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



7> magikMaker..:

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

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



8> roborourke..:

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

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


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

9> 小智..:

我发现,如果z-index不能正常工作,因为它的父/兄弟没有指定的z-index.

所以如果你有:

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

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


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

10> 小智..:

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

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

推荐阅读
云聪京初瑞子_617
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有