网页网站您现在的位置是:首页 > 博客日志 > 网页网站

z-index的最大值、最小值究竟是多少?

<a href='mailto:'>微wx笑</a>的头像微wx笑2019-07-25 15:14:18网页网站人已围观关键字:CSS

简介很多人在使用z-index属性的时候,都喜欢使用999,9999,99999这样的数字,最早的时候学习老师好像说过最大值是9999,但真的是这样的吗?z-index的最大值、最小值都是多少呢?

很多人在使用z-index属性的时候,都喜欢使用999,9999,99999这样的数字,最早的时候学习老师好像说过最大值是9999,但真的是这样的吗?z-index的最大值、最小值都是多少呢?


Bv5编程技术_踩坑日志_进阶指南 - 无知人生

浏览器

最大值

超过最大值后变成

最小值

小于最小值后变成

备注

   IE6
2147483647
2147483647
-2147483648-2147483648
IE7
2147483647
2147483647
-2147483648-2147483648
IE8
2147483647
2147483647
-2147483648-2147483648
IE9
2147483647
2147483647
-2147483648-2147483648
IE10
2147483647
2147483647
-2147483648-2147483648
IE11
2147483647
2147483647
-2147483648-2147483648
Firefox 2
 2147483647
元素消失??
Firefox 3
2147483647
 0
??
Firefox 29(最新稳定版)
2147483647
2147483647
-2147483648-2147483648
Safari 3
 16777271
16777271
??
Safari 4
2147483647
2147483647
??
Safari 5.1.7(最新稳定版)
2147483647
数值不变
-2147483648数值不变使用的是webkit内核,所以和chrome一致
Chrome 29
2147483647
2147483647
-2147483648数值不变
Chrome  35(最新稳定版)
2147483647
数值不变
-2147483648数值不变

chrome允许设置超过最大值、最小值的z-index,Bv5编程技术_踩坑日志_进阶指南 - 无知人生

不过超出之后层叠样式会使用最大值和Bv5编程技术_踩坑日志_进阶指南 - 无知人生

最小值来计算(比如设置为2147483648时,Bv5编程技术_踩坑日志_进阶指南 - 无知人生

会以2147483647计算层叠关系)Bv5编程技术_踩坑日志_进阶指南 - 无知人生

Opera 9
2147483647
2147483647

Opera 21(最新稳定版)
2147483647
数值不变
-2147483648数值不变使用的是webkit内核,所以和chrome一致
测试方法很简单:两个元素都绝对定位,然后分别设置z-index值(通过浏览器自带开发工具修改css;js操作)。

结论:z-index的取值范围为-2147483648 ~~ 2147483647。而C的Int型数据类型的大小也为-2147483648 ~~ 2147483647。说明CSS的z-index在C中是作为INT型计算的。一般z-index都不超过100000,所以基本上不用考虑大小问题。

PS:chrome中对于width和height的最大限制为33554428,这个有时间再做吧。


参考文章:


Bv5编程技术_踩坑日志_进阶指南 - 无知人生

来源:z-index的最大值、最小值


Bv5编程技术_踩坑日志_进阶指南 - 无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()

相关文章

站点信息

  • 建站时间:2018-10-24
  • 服务期限阿里云ECS 2027年到期
  • 主题模板:基于《今夕何夕》修改
  • 文章统计:198篇
  • 文章评论:27条
  • 文章阅读:2308次
  • 文章点赞:914次
  • 微信公众号:扫描二维码,关注我们
  • 微信公众号-微wx笑