CSS: z-index 取值范围

原理:
当两个同父元素z-index相同时,后面的元素显示在上面。

当z-index超过浏览器最大值时,浏览器会按最大值计算

方法:
连续放置两个div元素d1,d2;并设定position:absolute及不同背景色。

设定d1.z-index = max + 1, d2.z-index = max;

当max + 1有效时,d1在前;当max + 1 无效时,d2在前。(参看原理)

设定d1.z-index = min, d2.z-index = min - 1;

当min - 1有效时,d1在前;当min - 1 无效时,d2在前。(参看原理)

结果:

版本最大值最小值类型
IE8.02147483647-2147483648number
Chrome3.0.1952147483647-2147483648string
FF3.5.72147483647-2147483648string
Opera10.102147483647-2147483648string

结论:

当需要兼容以上所有浏览器时,z-index需使用 -2147483584 ~ 2147483584 范围内的数字

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐