z-index的最大值、最小值究竟是多少？
微wx笑
2019-07-25【网页网站】
1881
11
0关键字：
CSS
很多人在使用z-index属性的时候，都喜欢使用999，9999，99999这样的数字，最早的时候学习老师好像说过最大值是9999，但真的是这样的吗？z-index的最大值、最小值都是多少呢？
很多人在使用z-index属性的时候，都喜欢使用999，9999，99999这样的数字，最早的时候学习老师好像说过最大值是9999，但真的是这样的吗？z-index的最大值、最小值都是多少呢？
浏览器 | 最大值 | 超过最大值后变成 | 最小值 | 小于最小值后变成 | 备注 | ||||||
|
|
| -2147483648 | -2147483648 | |||||||
| IE7 |
|
| -2147483648 | -2147483648 | |||||||
| IE8 |
|
| -2147483648 | -2147483648 | |||||||
| IE9 |
|
| -2147483648 | -2147483648 | |||||||
| IE10 |
|
| -2147483648 | -2147483648 | |||||||
| IE11 |
|
| -2147483648 | -2147483648 | |||||||
|
| 元素消失 | ? | ? | |||||||
|
|
| ? | ? | |||||||
| Firefox 29(最新稳定版) |
|
| -2147483648 | -2147483648 | |||||||
|
|
| ? | ? | |||||||
|
|
| ? | ? | |||||||
| Safari 5.1.7(最新稳定版) |
|
| -2147483648 | 数值不变 | 使用的是webkit内核，所以和chrome一致 | ||||||
|
|
| -2147483648 | 数值不变 | |||||||
| Chrome 35(最新稳定版) |
|
| -2147483648 | 数值不变 | chrome允许设置超过最大值、最小值的z-index， 不过超出之后层叠样式会使用最大值和 最小值来计算（比如设置为2147483648时， 会以2147483647计算层叠关系） | ||||||
|
|
| ？ | ？ | |||||||
|
|
| -2147483648 | 数值不变 | 使用的是webkit内核，所以和chrome一致 |
1 2 3 4 | 测试方法很简单：两个元素都绝对定位，然后分别设置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，这个有时间再做吧。参考文章： |
来源：z-index的最大值、最小值
本文为转载文章，版权归原作者所有，不代表本站立场和观点。
