div层调整z-index属性无效原因分析及解决方法_HTML5_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • HTML5

    当前位置:主页 > 网页制作 > HTML5 >

    div层调整z-index属性无效原因分析及解决方法

    时间:2019-08-13|栏目:HTML5|点击:
  • 在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效。在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或是fixed。

    1.第一种情况(z-index无论设置多高都不起作用情况):

    这种情况发生的条件有三个:

    1、父标签 position属性为relative;

    2、问题标签无position属性(不包括static);

    3、问题标签含有浮动(float)属性。

    eg:z-index层级不起作用,浮动会让z-index失效,代码如下:

    代码如下:

    <DIV style="POSITION: relative; Z-INDEX: 9999">

    <IMG style="FLOAT: left" src=http://down.admin5.com/info/2016/0112/"/131101/1A5494I0-0.jpg">

    </DIV>

    解决办法有三个(任一即可):

    1、position:relative改为position:absolute;

    2、浮动元素添加position属性(如relative,absolute等);

    3、去除浮动。

    2.第二种情况

    IE6下,层级的表现有时候不是看子标签的z-index多高,而要看整个DOM tree(节点树)的第一个relative属性的父标签的层级。

    eg:IE7与IE6有着同样的bug,原因很简单,虽然图片所在div当前的老爸层级很高(1000),但是由于老爸的老爸不顶用,可怜了9999如此强势的孩子没有出头之日啊!,代码如下:

    代码如下:

    <DIV style="POSITION: relative">

    <DIV style="POSITION: relative; Z-INDEX: 1000">

    <DIV style="POSITION: absolute; Z-INDEX: 9999"> <IMG src=http://down.admin5.com/info/2016/0112/"/131101/1A3194V7-1.jpg"> </DIV>

    </DIV>

    </DIV>

    解决办法: 在第一个relative属性加上一个更高的层级(z-index:1),代码如下:

    代码如下:

    <DIV style="POSITION: relative; Z-INDEX: 1">

    <DIV style="POSITION: relative; Z-INDEX: 1000">

    <DIV style="POSITION: absolute; Z-INDEX: 9999"> <IMG src=http://down.admin5.com/info/2016/0112/"/131101/1A3194V7-1.jpg"> </DIV>

    上一篇:基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作

    栏    目:HTML5

    下一篇:HTML5 transform三维立方体实现360无死角三维旋转效

    本文标题:div层调整z-index属性无效原因分析及解决方法

    本文地址:http://www.jh-floor.com/wangyezhizuo/HTML5/20214.html

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号