您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页 >> 建站知识 >> 详情
扫二维码关注紫石头原创模板堂 4大优势,全网首家
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站还享受设计型网站同等级售后服务,这不是做梦!紫石头原创模板站,让这一切变为可能!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

免费咨询热线
0371-56789-390

css样式中z-index设置不生效的原因
发表:紫石头原创模板堂    发表时间:2019-06-14 12:00:45    阅读:90

    今天在做移动端web页面开发的时候,由于UI方案的设计图需要部分层叠的效果,所以使用z-index,存在这种情况:使用z-index为负数实现了层叠效果,但是由于底层存在事件,但是由于z-idnex为负数,所以该块级元素处于body之下,导致事件无法触发,修改z-index为正,但是存在大小顺序之后可以触发事件,但是没有了层叠效果。查阅资料之后,发现了自己对z-index的了解存在误区。

    上面是在w3c上的解释用法,之前没有具体了解,现在才发现上面指的定位元素就是指position的取值为absolute fixed relative的元素。其他的元素上面z-index无效。
    查阅资料发现,还有两个条件下也能导致这个问题的出现:
    1、父标签 position属性为relative;
    2、问题标签含有浮动(float)属性;
    解决方法也很简单:
    1、position:relative改为position:absolute;
    2、去除浮动。
    还有一种比较特殊的情况也会导致这个问题:
    IE6、IE7下,层级的表现有时候不是看子标签的z-index多高,而要看整个DOM tree(节点树)的第一个relative属性的父标签的层级。
    解决方法也很简单: 在第一个relative属性加上一个更高的层级就可以了。
工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2020 永易搜旗下紫石头原创模板堂 All Rights Reserved 豫ICP备14011598号-7 营业执照