在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置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失效,代码如下:

1 <</code>DIV style="POSITION: relative; Z-INDEX: 9999"
2 <</code>IMG style="FLOAT: left" src="http://www.yuanchuang.net/uploads/allimg/131101/1A5494I0-0.jpg"
3 </</code>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如此强势的孩子没有出头之日啊!,代码如下:

1 <</code>DIV style="POSITION: relative"
2 <</code>DIV style="POSITION: relative; Z-INDEX: 1000"
3 <</code>DIV style="POSITION: absolute; Z-INDEX: 9999"> <</code>IMGsrc="http://www.yuanchuang.net/uploads/allimg/131101/1A3194V7-1.jpg"> </</code>DIV
4 </</code>DIV
5 </</code>DIV>

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

1 <</code>DIV style="POSITION: relative; Z-INDEX: 1"
2 <</code>DIV style="POSITION: relative; Z-INDEX: 1000"
3 <</code>DIV style="POSITION: absolute; Z-INDEX: 9999"> <</code>IMGsrc="http://www.yuanchuang.net/uploads/allimg/131101/1A3194V7-1.jpg"> </</code>DIV
4 </</code>DIV
5 </</code>DIV>

【转载】div层调整zindex属性无效原因分析及解决方法的更多相关文章

  1. div层调整zindex属性无效原因分析及解决方法

    在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效.在CSS中,只能通过代码改变层级,这个属性就是z- index,要让z-index起作用有个小小前提,就是元素的po ...

  2. 【Web前端】div层调整zindex属性无效原因分析及解决方法

    在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效.在CSS中,只能通过代码改变层级,这个属性就是z- index,要让z-index起作用有个小小前提,就是元素的po ...

  3. 【FAQ】接入HMS Core推送服务,服务端下发消息常见错误码原因分析及解决方法

    HMS Core推送服务支持开发者使用HTTPS协议接入Push服务端,可以从服务器发送下行消息给终端设备.这篇文章汇总了服务端下发消息最常见的6个错误码,并提供了原因分析和解决方法,有遇到类似问题的 ...

  4. Code:Blocks 中文乱码问题原因分析和解决方法

    下面说说修改的地方. 1.修改源文件保存编码在:settings->Editor->gernal settings 看到右边的Encoding group Box了吗?如下图所示: Use ...

  5. MySQL This function has none of DETERMINISTIC, NO SQL...错误1418 的原因分析及解决方法

    MySQL开启bin-log后,调用存储过程或者函数以及触发器时,会出现错误号为1418的错误: ERROR 1418 (HY000): This function has none of DETER ...

  6. c# 关于抓取网页源码后中文显示乱码的原因分析和解决方法

    原因分析:首先,目前大多数网站为了提升网页浏览传输速率都会对网站内容在传输前进行压缩,最常用的是GZIP压缩解压解压算法,也是支持最广的一种. 因为网站传输时采用的是GZIP压缩传输,如果我们接受we ...

  7. 【FAQ】应用内支付服务无法拉起支付页面常见原因分析和解决方法

    华为应用内支付服务(In-App Purchases)通过简便的接入流程为用户提供良好的应用内支付体验,然而在实际接入过程中,有一些开发者反馈测试时会无法正常拉起支付页面,下文将详细分析问题出现的5种 ...

  8. SSH 无法启动的原因分析及解决方法

    简介 Secure Shell(缩写为 SSH),由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为一项创建在应用层和传输层基础上的安全协议,为计算机上的 S ...

  9. thinkphp6.0 composer 安装 web-token/jwt-framework 常见出错原因分析及解决方法

    composer require web-token/jwt-framework 安装JWT出现错误提示 - web-token/jwt-framework v2.0.1 requires ext-g ...

随机推荐

  1. 首先定义一个描述银行账户的Account类,包括成员变 量“账号”和“存款余额”,成员方法有“存款”、“取款”和“余额查询”。其次, 编写一个主类,在主类中测试Account类的功能。(已完善)

    package java1; public class Account { String zhanghao; double yue=0; double add; double get; Account ...

  2. .svn批量删除

    c.bat @echo on @rem 删除SVN版本控制目录 @rem for /r . %%a in (.) do @if exist "%%a\.svn" @echo &qu ...

  3. When cloning on with git bash on Windows, getting Fatal: UriFormatException encountered

    I am using git bash $ git --version git version .windows. on Windows 7. When I clone a repo, I see: ...

  4. 使用eclipse JDT compile class,解决 无法确定 X 的类型参数;对于上限为 X,java.lang.Object 的类型变量 X,不存在唯一最大实例

    ant 命令行方式执行build javac编译class出现 泛型无法转换 无法确定 <X>X 的类型参数:对于上限为 X,java.lang.Object 的类型变量 X,不存在唯一最 ...

  5. 【Android】 Android-wifi 直连 wifi direct wifi p2p

    现在,Android的支持Wi -Fi的直接点对点点对点(P2P)Android系统的供电设备和其他类型的设备,没有一个热点或互联网连接之间的连接.Android框架提供了一套Wi - Fi的P2P的 ...

  6. 构造函数模式自己定义js对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Apex Design Patterns

    Apex allows you to build just about any custom solution on the Force.com platform. But what are the ...

  8. 转载:android.屏幕锁,解锁,在取证上的应用

    中国司法-鉴定,2013年第06期杂志  

  9. Understanding mysql max_connect_errors

    来自:http://mysqlblog.fivefarmers.com/2013/08/08/understanding-max_connect_errors/ Perhaps like many u ...

  10. 关于VS2010出现“此方法显式使用的 CAS 策略已被 .NET Framework 弃用... ...请使用 NetFx40_LegacySecurityPolicy 配置开关”解决办法

    有时候VS会出现“此方法显式使用的 CAS 策略已被 .NET Framework 弃用.若要出于兼容性原因而启用 CAS 策略,请使用 NetFx40_LegacySecurityPolicy 配置 ...