CSS: zindex 取值范围

  • 原理:

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

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

  • 方法:
    1. 连续放置两个div元素d1,d2;并设定position:absolute及不同背景色。
    2. 设定d1.z-index = max + 1, d2.z-index = max;
    3. 当max + 1有效时,d1在前;当max + 1 无效时,d2在前。(参看原理)
    4. 设定d1.z-index = min, d2.z-index = min - 1;
    5. 当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 范围内的数字

原文地址:https://www.cnblogs.com/xiami303/p/2617250.html