手机
当前位置:查字典教程网 >网页设计 >心得技巧 >如何解决IE6/7绝对定位元素神秘消失或被遮挡的方法
如何解决IE6/7绝对定位元素神秘消失或被遮挡的方法
摘要:1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7,FF中显示一致;2.当绝对定位层的邻近浮动层的宽度不等于...

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; 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绝对定位元素神秘消失或被遮挡的方法】相关文章:

ie8,chrome中table的宽度固定方法

用户体验的元素,还是网页设计的元素

关于页面元素的绝对定位和相对定位的一些理解

如何在网站中插入天气预报

网页页面设计的4个实用建议

如何用JavaScript获取/计算页面元素的offset

关于favicon.ico的两三事(最好就是放根目录)

豆瓣网站关于网站内容小改动的方法

页面出现滚动条的时候如何让滚动条不影响页面宽度

关于儿童类网站的视觉结构布局设计的方法分析

精品推荐
分类导航