浏览器 |
最大值 |
超过最大值后变成 |
最小值 |
小于最小值后变成 |
备注 |
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, 不过超出之后层叠样式会使用最大值和 最小值来计算(比如设置为2147483648时, 会以2147483647计算层叠关系) |
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,这个有时间再做吧。
参考文章:
http://stackoverflow.com/questions/8565821/css-max-z-index-value
http://www.puidokas.com/max-z-index/
http://stackoverflow.com/questions/491052/mininum-and-maximum-value-of-z-index#answer-491105
http://www.quora.com/Cascading-Style-Sheets/Is-there-a-maximum-value-for-z-index