最近做项目,经常遇到IE7以下浏览器中。一些悬浮框被一些元素遮挡的问题,这些元素一般都是设置了position的。问题的根本在不是被设置绝对定位的元素上,而是在设置了相对定位的父元素上。

 
我查阅了一些资料。当设置了相对定位的父元素如果没有设置z-index属性,当后面有元素设置position:relative的时候,则后面的元素就会遮挡掉前面的元素,不管前面的元素设置了多大的z-index
 
解决的方法我总结一下
 
1.对遮挡元素中设置z-index:0;初始化掉。
2.在被遮挡的父元素中,也就是设置了相对定位的元素中设置z-index属性,最好比遮挡元素要大一些。
 
 

在平时编写中,编写了position:relative后就要及时在后面设置z-index:0;如果有了这个意识,那以后的维护工作会相对轻松一些,这是我的个人看法。

IE6、7绝对定位层被遮挡的原因(主要是父层决定的)的更多相关文章

  1. 解决IE6 IE7绝对定位弹层被后面的元素遮住

    解决IE6 IE7绝对定位弹层被后面的元素遮住? 弹层边框一直被后面的元素边框遮住,试了n种方法,只有这个比较好用. <div class="tuijian-table"&g ...

  2. 关于IE6下绝对定位元素莫名消失的问题

    一般来说,让绝对定位的元素不挨着浮动元素就OK了: 1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7,FF中显示一致: 2.当绝对定位层的邻近浮动层的宽度不等于父层宽 ...

  3. 谷歌下解决Pop遮罩层无法遮挡滚动栏下问题

    今天用pop的弹出窗体里,出现一个问题,当网页出现滚动栏里,不能遮挡住,解决Pop遮罩层无法遮挡滚动栏下问题. 可通过下载获取改动后的代码----->进入下载

  4. jquery制作弹出层带遮罩效果,点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  5. layer子层给父层页面元素赋值,以达到向父层页面传值的效果

    父层: jsp中: //页面上添加一个隐藏的输入框待用于被子层设置value,从而将子层的数据传递到此页面 <input type="hidden" id="get ...

  6. controller层负责创建类传递类给service;service层负责逻辑编写调用dao层 将编写后的类传递到dao层,保证事务的正确性;dao层负责数据的持久化

    controller层负责创建类传递类给service:service层负责逻辑编写调用dao层 将编写后的类传递到dao层,保证事务的正确性:dao层负责数据的持久化

  7. js 冒泡事件阻止 父层事件影响子层

    当父层 与子层 有相同的事件时,但子层跟父层执行的内容却不一样时 为了 防止 父层事件对子层造成影响我们可以在子层的方法里做如下操作 function A (event){ event.stopPro ...

  8. ie6 ie7 绝对定位 相对定位 层被遮住

    relative 上加上z-index有多个,则z-index递减, absolute层显示则不会被其它标签挡住.

  9. IE6下绝对定位元素和浮动元素并列绝对定位元素消失

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

随机推荐

  1. C# SMTP邮件发送 分类: C# 2014-07-13 19:10 333人阅读 评论(1) 收藏

    邮件发送在网站应用程序中经常会用到,包括您现在看到的博客,在添加评论后,系统会自动发送邮件通知到我邮箱的,把系统发送邮件的功能整理了下,做了一个客户端Demo,希望对有需要的童鞋有所帮助: 核心代码: ...

  2. Java Thread join() 的用法

    Java Thread中, join() 方法主要是让调用改方法的thread完成run方法里面的东西后, 在执行join()方法后面的代码.示例: class ThreadTesterA imple ...

  3. Android使用JNI实现Java与C之间传递数据(转)

    介绍Java如何将数据传递给C和C回调Java的方法.  java传递数据给C,在C代码中进行处理数据,处理完数据后返回给java.C的回调是Java传递数据给C,C需要用到Java中的某个方法,就需 ...

  4. Oracle中“行转列”的实现方式

    在报表的开发当中,难免会遇到行转列的问题. 以Oracle中scott的emp为例,统计各职位的人员在各部门的人数分布情况,就可以用“行转列”: scott的emp的原始数据为: EMPNO ENAM ...

  5. xUtils,butterknife...处理findviewbyid

      在写android中,经常要出现大量的findviewbyid et_path = (EditText) findViewById(R.id.et_path); tv_info = (TextVi ...

  6. git学习 分支特殊处理和配置03

    Bug分支: 当在一个分支上工作的时候:突然到其它分支修复bug,当前分支工作还没到要提交的程度:这时候可以使用git stash来将工作分支暂时存储起来: 用git stash list查看stas ...

  7. Xamarin Android教程Android基本知识版本介绍与系统介绍

    Xamarin Android教程Android基本知识版本介绍与系统介绍 Xamarin Android教程Android基本知识版本介绍与系统介绍,开发Andriod有时候不像iOS一样轻松,因为 ...

  8. docker push到本地仓库失败

    开启registry的方法: docker run -d -p : -v /data/registry:/tmp/registry registry 出错内容: Error: Status tryin ...

  9. Docker(linux container) 所依赖的底层技术

    1 Namespace 用来做PID的隔离,有了namespace,在docker container里头看来,就是一个完整的linux的世界.在host看来,container里的进程,就是一个普通 ...

  10. 如何处理js的跨域问题

    在bill.mail.10086.cn域内访问smsrebuild1.mail.10086.cn下的接口出现“阻止跨域源请求” 例如: URL 说明 是否允许通信 http://www.a.com/a ...