- 原理:
当两个同父元素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在前。(参看原理)
- 结果:
ver. max min typeof(div.style.zIndex) IE 8.0 2147483647 -2147483648 number Chrome 3.0.195 2147483647 -2147483648 string FF 3.5.7 2147483645 -2147483647 string Opera 10.10 2147483584 -2147483584 string - 结论:
当需要兼容以上所有浏览器时,z-index需使用 -2147483584 ~ 2147483584 范围内的数字