返回顶部
首页 > 资讯 > 精选 >怎么解决IE6/7绝对定位元素神秘消失或被遮挡的问题
  • 817
分享到

怎么解决IE6/7绝对定位元素神秘消失或被遮挡的问题

2023-06-08 05:06:48 817人浏览 薄情痞子
摘要

这篇文章将为大家详细讲解有关怎么解决IE6/7绝对定位元素神秘消失或被遮挡的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7

这篇文章将为大家详细讲解有关怎么解决IE6/7绝对定位元素神秘消失或被遮挡的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,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,可以冲破父级显示
看下面的代码:

代码如下:


<div style=”position:relative; background:#FF0000; width:200px; height:100px;”>
<div style=”position:absolute; background:#FFFF00; width:49px; height:50px; left:106px; top:310px; z-index:100“></div>
</div>
<div style=”position:relative; background:#000000; width:200px; height:100px;”></div>
<div style=”position:relative; background:#9900FF; width:200px; height:100px;”></div>


  代码解释:上面是三个相邻的相对定位的层,在第一个层里加了个相对其绝对定位的层,按照理论,这个绝对定位的元素是在三个相对定位元素之上的,但是,实际却没有显示。尝试设置z-index值也没有效。
  网上解决这个bug的办法一般用hack使B为负值,来降低 B 在IE下级别。但是这种方法在z-index为负值时,产生了新的ie bug按照定位的特性,ie的这个bug是可以回避。
  从表面上看下面的层 遮住了上面的绝对定位层,实际上是下面的 层遮住了绝对定位的的父级层,只要将 该父级层的z-index设定大于后面的层即可。

关于“怎么解决IE6/7绝对定位元素神秘消失或被遮挡的问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: 怎么解决IE6/7绝对定位元素神秘消失或被遮挡的问题

本文链接: https://lsjlt.com/news/252084.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 怎么解决IE6/7绝对定位元素神秘消失或被遮挡的问题
    这篇文章将为大家详细讲解有关怎么解决IE6/7绝对定位元素神秘消失或被遮挡的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7...
    99+
    2023-06-08
  • 如何解决绝对定位元素被遮挡
    本篇内容主要讲解“如何解决绝对定位元素被遮挡”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何解决绝对定位元素被遮挡”吧!具体方法如下:ie7下绝对定位元素即使...
    99+
    2024-04-02
  • css中如何解决绝对定位元素被遮挡的问题
    这篇文章主要介绍css中如何解决绝对定位元素被遮挡的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体方法如下:ie7下绝对定位元素即使z-index值很高,如果其设置相对定位的...
    99+
    2024-04-02
  • 如何解决绝对定位的元素在ie6下不显示隐藏了的问题
    本篇内容主要讲解“如何解决绝对定位的元素在ie6下不显示隐藏了的问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何解决绝对定位的元素在ie6下不显示隐藏了的...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作