• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > IE绝对定位元素神秘消失或被遮挡的解决方法

IE绝对定位元素神秘消失或被遮挡的解决方法

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含神秘消失,被遮挡等相关知识,佚名 希望在学习及工作中可以帮助到您
发现了一个奇妙的现象:
查了相关资料,高人有这样的解释:
1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7,FF中显示一致;
2.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示;
3.当绝对定位层的邻近浮动层的宽度等于父层宽度时,以及没有清除浮动时,IE6不显示绝对定位层,IE7/FF显示;
4.当绝对定位层的邻近浮动层的宽度等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示;
要解决这个BUG的方法也很简单,让绝对定位层不挨着浮动层放置就好了,还有个更简单的方法,在绝对定位元素和其他元素之间加一个空白的div。
再来看看绝对定位元素神秘消失被遮挡的现象
先了解一下所涉及到的几个定位特性:
1. 相对定位元素默认的z-index的数值是0。
2. 当两个相对定位同时出现时,代码靠后的z-index优先。
3. 子级遵循父级设定的z-index;如果子级设定了绝对定位、z-index,可以冲破父级显示
看下面的代码:

从表面上看 下面的层 遮住了上面的绝对定位层,实际上是下面的 层遮住了绝对定位的的父级层,只要将 该父级层 的z-index设定大于后面的层即可

您可能想查找下面的文章:

  • IE绝对定位元素神秘消失或被遮挡的解决方法

相关文章

  • 2017-08-06css position 设置元素的定位方式详解
  • 2017-08-06使用CSS3在触屏上为按钮实现激活效果
  • 2017-08-06在ul中使li水平布局的两种方法
  • 2017-08-06table中的超长字符串用省略号表示的css样式
  • 2017-08-06div+css实现仿猪八戒首页导航菜单效果
  • 2017-08-06给div加滚动条 div显示滚动条设置代码
  • 2017-08-06table表格某一td内容太多导致样式混乱的解决方案
  • 2017-08-06CSS3绘制不规则图形的一些方法示例
  • 2017-08-06通过CSS样式来修改ExtJS:TreePanel的小图标
  • 2017-08-06Div+Css实现屏蔽效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单
    • 深入理解css属性的选择对动画性能的影响
    • div层调整z-index属性无效原因分析及解决方法
    • CSS伪类:before在元素之前 :after 在元素之后实例讲解
    • CSS 层叠样式表命名参考表
    • css gorush 状态栏不显示链接地址
    • 基于css3的属性transition制作菜单导航效果
    • 栅格规范制作的方法介绍(图文教程)
    • css3圆角边框和边框阴影示例
    • 一句代码解决css ie8兼容性问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有