Skip to content

CSS中的z-index的最大值

发表于:

文章分类:web

文章标签:z-index最大值

阅读量:

z-index
z-index
图片来自:www.annyhe.com/zindex/#3

z-index属性指定了一个元素及其子元素的 z-order。 当元素之间重叠的时候,z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。 ---MDN z-index

z-index sample
z-index sample

业务代码中看见了这样一段code,然后想都没有想,直接把另一个元素的z-index值设置为:999999999999999 + 1,就能把它覆盖掉吧,结果并没有那么理想。◻︎_-||

然后就去查找z-index在各个浏览器中的最大值是多少呢,Google了一番找到了下面这个表格,

BrowserMax z─index valueWhen exceeded, value changes to:
浏览器最大值超过时,值的变化:
Firefox 0-22147483647(length:10)element disappears/元素消失
Firefox 32147483647(length:10)0
Firefox 4+2147483647(length:10)2147483647(length:10)
Safari 0-316777271(length:8)16777271(length:8)
Safari 4+2147483647(length:10)2147483647(length:10)
Internet Explorer 6+2147483647(length:10)2147483647(length:10)
Chrome 29+2147483647(length:10)2147483647(length:10)
Opera 9+2147483647(length:10)2147483647(length:10)

举个栗子:

特此而来Mark一下,没有辣么多浏览器,也就测试了下:

  • chrome(版本 54.0.2840.87 (64-bit)
  • Safari(版本 10.0.1 (12602.2.14.0.7)
  • Firefox(49.0.2

参考文献:

上一篇
下一篇
总访问量:-