巅峰霸主 > 设计开发 > 前端技术 >

z-index最大值和最小值是多少,超出之后浏览器怎么处理

时间:2020-11-30 16:04:40  来源:巅峰霸主网  作者:烈火大地 点击:
摘要:css中z-index属性一直是常用的,但是具体的最大值和最小值却没有真正的研究过,那么z-index限制范围是多少呢,超出之后浏览器是怎么处理的……

z-index最大值: 

IE FireFox Safari的z-index最大值是2147483647 。 

Opera的最大值是2147483584.。 

IE Safari Opera在超过其最大值时按最大值处理。 

FireFox 在超过最大值时会数据溢出正负不定,但有一点可以肯定绝对不会高于2147483647层 

z-index最小值 

IE FireFox Safari的z-index最小值是-2147483648 

Opera的z-index最小值-2147483584 

FireFox在-2147483648<=z-index<0时层不显示 在z-index<-2147483648时溢出实际数字正负不定 

IE Safari Opera在z-index<0时显示,在小于其最小值时都按其最小值处理 

z-index的最大值、最小值

浏览器

最大值

超过最大值后变成

最小值

小于最小值后变成

备注

IE621474836472147483647-2147483648-2147483648
IE721474836472147483647-2147483648-2147483648
IE821474836472147483647-2147483648-2147483648
IE921474836472147483647-2147483648-2147483648
IE1021474836472147483647-2147483648-2147483648
IE1121474836472147483647-2147483648-2147483648
Firefox 22147483647元素消失??
Firefox 321474836470??
Firefox 29(最新稳定版)21474836472147483647-2147483648-2147483648
Safari 31677727116777271??
Safari 421474836472147483647??
Safari 5.1.7(最新稳定版)2147483647数值不变-2147483648数值不变使用的是webkit内核,所以和chrome一致
Chrome 2921474836472147483647-2147483648数值不变
Chrome  35(最新稳定版)2147483647数值不变-2147483648数值不变

chrome允许设置超过最大值、最小值的z-index,

不过超出之后层叠样式会使用最大值和

最小值来计算(比如设置为2147483648时,

会以2147483647计算层叠关系)

Opera 921474836472147483647
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,这个有时间再做吧。

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部