在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置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. celery简单应用

    写作背景介绍 在celery简单入门中已经介绍了写作的背景,这篇文章主要是深入介绍celery的使用技巧.在实际的项目中我们需要明确前后台的分界线,因此我们的celery编写的时候就应该是分成前后台两 ...

  2. Atitit.提升稳定性-----分析内存泄漏PermGen OOM跟解决之道...java

    Atitit.提升稳定性-----分析内存泄漏PermGen OOM跟解决之道...java 1. 内存区域的划分 1 2. PermGen内存溢出深入分析 1 3. PermGen OOM原因总结 ...

  3. spring 配置定时任务

    spring的定时任务配置分为三个步骤:1.定义任务2.任务执行策略配置3.启动任务1.定义任务 <!--要定时执行的方法--> <bean id="testTaskJob ...

  4. Proxy模式:管理第三方API

    软件中的Barrier. 数据从程序移到DB中时,要跨越数据库的Barrier.消息从一个PC到另一个PC时,要跨越网络Barrier. 跨越可能是复杂的,很可能处理Barrier的Code会多于处理 ...

  5. Leetcode-203 Remove Linked List Elements

    #203.   Remove Linked List Elements Remove all elements from a linked list of integers that have val ...

  6. Android图片处理-相机、相处简单调用

    安卓开发中,常常需要使用到手机相机拍照.或者相册上传头像等等.通过使用Intent,我们很方便地获得相机.相册里面的图片: 1.相机调用,通过设置File文件路径和文件名,可以将拍照得到的图片保存下来 ...

  7. easy datagrid 按钮控制

    onBeforeLoad : function() {// 这里是紧接着你的修改按钮的 // 注意ID为你初始化工具栏按钮对应的ID var adminid=<%=Admin_Id%>+' ...

  8. DataGridView隔行显示不同的颜色

      如果该dataGridView是跟数据库绑定的,则可以触发DataBindingComplete事件:  1private   void   dataGridView1_DataBindingCo ...

  9. JAVA生产者消费者的实现

    春节回了趟老家,又体验了一次流水席,由于桌席多,导致上菜慢,于是在等待间,总结了一下出菜流程的几个特点: 1.有多个灶台,多个灶台都在同时做菜出来. 2.做出来的菜,会有专人用一个托盘端出来,每次端出 ...

  10. jackson 注脚学习参考

    (1)初级我们从几个简单的使用场景开始:重命名属性,忽略属性,以及修改属性所使用的类型.注意:下面的例子仅仅显示了成员属性(field properties),注解同样也可以用在成员方法(getter ...