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

摘要:
让我们来看看绝对定位元素的神秘消失和遮挡。首先,让我们了解涉及的几个定位特征:1.相对定位元素的默认z索引值为0。

在进行网页布局的时候,经常会根据需要设置相对,绝对以及浮动定位;
发现了一个奇妙的现象:
查了相关资料,高人有这样的解释:
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,可以冲破父级显示
看下面的代码:
<div style="position:relative; background:#FF0000; 200px; height:100px;">
     <div style="position:absolute; background:#FFFF00; 49px; height:50px; left:106px; top:310px; z-index:100"></div>
</div>
<div style="position:relative; background:#000000; 200px; height:100px;"></div>
<div style="position:relative; background:#9900FF; 200px; height:100px;"></div>
代码解释:上面是三个相邻的相对定位的层,在第一个层里加了个相对其绝对定位的层,按照理论,这个绝对定位的元素是在三个相对定位元素之上的,但是,实际却没有显示。尝试设置z-index值也没有效。
网上解决这个bug的办法一般用hack使B为负值,来降低 B 在IE下级别
但是这种方法在z-index为负值时,产生了新的ie bug
按照定位的特性,ie的这个bug是可以回避的
从表面上看 下面的层 遮住了上面的绝对定位层,实际上是下面的 层遮住了绝对定位的的父级层,只要将 该父级层 的z-index设定大于后面的层即可

免责声明:文章转载自《IE绝对定位元素神秘消失或被遮挡的解决》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Java——BufferedImage对象整理分布式锁:业务场景&amp;amp;分布式锁家族&amp;amp;实现原理下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【转】CSS浏览器兼容性与解析问题终极归纳

1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯。 2.IE6双边距问题:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。例如: HTML: <div cla...

针对IE浏览器里面CSS的Bug解决方法

IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况。如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug。 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的...

ie浏览器不支持cmyk模式下的JPEG图片

  今天分享一个小小的技巧,就是解决颜色模式为印刷格式CMYK四色模式的JPEG图片上传到服务器上不被支持的问题。  如果你用photo shop打开该图片,细心的人就会发现JPG图像标题栏的图片名称后面紧跟着该图像的颜色模式,如果是RGB的就显示RGB,如果是四色模式CMYK的就显示CMYK。而通常网络上使用的基本都是RGB格式。况且IE6.9-ie8...

js 光标位置处理

/** * 获取选中文字 * 返回selection,toString可拿到结果,selection含有起始光标位置信息等 **/ function getSelectText() { var text, userSelection = window.getSelection()||document.se...

用css画图标

css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一些简单的图标。 这些图标很多是通过三角形来拼贴起来的,所以我们需要知道怎么样画三角形。 1. 我们要将该 div 的 width 和 height 都设置为...

JqueryEasyUI 解决IE下datagrid无法刷新的问题

问题描述: 在使用JqueryEasyUI 时,发现在IE下$('#table').datagrid('reload');无效,数据并没有被刷新,究其原因,是因为刷新时,datagrid请求的url没有变化,IE就从浏览器缓存里取数据了,返回的是302响应码。 解决办法: 在$('#table').datagrid('reload');前修改$('#tab...