CSS: z-index 取值范围

  • 原理:

    当两个同父元素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.maxmintypeof(div.style.zIndex)
    IE8.02147483647 -2147483648number
    Chrome3.0.1952147483647-2147483648string
    FF3.5.72147483645-2147483647string
    Opera10.102147483584-2147483584string
  • 结论:

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值