IE6下面 position:absolute 失效导致绝对定位层不显示的原因

在网上看到的,最近遇到好几次,总结就是

当你发现某元素在IE6,7下面无法显示的时候,且这个元素是经过position absolute的,加之前后之类的有浮动,你就要考虑一下兄弟元素,有时候是前面,有时候是后面,加一个<div class="clearboth"></div>

今天早上重构一个机票订购页面的时候,为了配合JS特效所以需要写一个绝对定位浮动层,写完在测试的时候发现,在FF、ie8、ie7、op下都可以正常显示,可是到了IE6的时候,这个绝对定位浮动层却无法显示,把CSS中“position:absolute”去掉后就可以显示出来,这是何原因呢?

经过baidu、goole折腾研究了半天后终于找到了原因,原来是这个绝对定位浮动层旁边紧邻的那个div层是个使用“float:left”左浮动,而导致这个绝对定位浮动层在IE6下无法显示,解决办法就是在这个绝对定位浮动层前面插入一个清除浮动的层。

总结:在IE6下面 position:absolute的绝对定位层前面紧邻的那个层如果有用到“float” css浮动属性会导致这个绝对定位层无法显示。

时间: 2024-08-14 04:29:41

IE6下面 position:absolute 失效导致绝对定位层不显示的原因的相关文章

IE6下绝对定位层不显示

之前遇到一个超级坑的问题: 一个绝对定位的元素,在firefox,chrome,ie8-9下都可以正常显示,就是IE6中不显示. 尝试过设置z-index, float:left,display,block等,绝对定位的元素还是没有显示出来, 然而,我在此元素上加上 clear属性即可解决: 网上大神解决方法如下: 1.在绝对定位元素外层加一空白div,不应用任何样式.终于,绝对定位的元素显示出来了. 2.在采用"position:aboslute"进行绝对定位的元素前增加一个清除浮动

通过案例理解position:relative和position:absolute

w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:absolute困扰了我快一个星期之久,网上找到的资料鱼龙混杂,刚确定“这样”的理解之后,看另一份资料,发现“这样”理解是错了,就这样不断更正,并记录下来,最终整理出这份,以备参阅. 若有错误,请指正. 下面的结果都是基于firefox38版本来测试的. position:relative相对定位 1. 如

层模型--绝对定位(position:absolute)

如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位.如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口. 如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px. div{ width:200px; height:200px; border:2px red solid

IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

首先我们来看一个代码: 复制代码代码如下:<div id="layer1″ style="margin:20px; border:1px solid #F88; width:400px; "> <div id="layer2″ style="position:absolute; background-color:#ccc;">Absolute (layer2)</div> <div id="la

IE6/IE7下position:absolute;绝对定位偏移、不显示问题

其实这个原因是因为IE6/IE7的解析是在position:absolute之后,仍然会按照普通文档流的解析来进行,而要打破这种方式,让它正常工作就需要给它一个定位,具体代码如下:方法一: CSS: html代码: 切记left:0px;必须两个都要写,少写一个都会造成不显示:  方法二:

HTML兼容性 不声明doctype,IE9标准模式下position:fixed定位失败,导致遮罩层(Mask Layer)显示在页面最下方,FF和Chrome正常

问题描述:ie9标准模式下,老系统中的页面很少有写doctype的,但是不写这个声明,浏览器对于文档的解析机制就不一样了,特别是对于table和样式中的width, height 为100%布局,以及高度自适应的实现方案有影响,不了解的可以自行百度先,那么不写的话,又想加1个遮罩层的效果,一般我们遮罩层是借助position绝对定位实现的,可以写fixed,也可以写absolute,设置为fixed的时候,文档没有doctype,就会导致遮罩层出现在文档最下方,而不是绝对定位的效果,切换为ie9

绝对定位 position:absolute,相对定位 position:relative

<1> 当我们要使用绝对定位的时候,必须要有两个条件 1>必须给父元素加定位属性,一般建议使用 position:relative(即:给父元素设为相对定位); 2>给子元素,加绝对定位position:absolute(给子元素设置为绝对定位); 同时加方向属性(top ,left,rigth,bottom) 绝对定位是以父元素为基准点,进行定位(如果他没有父元素,或者它的父元素没有设置position:relative属性)它就会以<body>为基准点进行定位.绝对

position:absolute绝对定位能不能使之相对于容器右对齐? 网摘

如果要将绝对定位元素相对父元素定位,就必须设置父元素为相对定位,如:<style type="text/css"> .a{position:relative;background:green;} .b{position:absolute;right:0;top:0;background:red;}</style><div class="a">父元素,net920com ,其它一些内容.<div class="b&q

今天我们来谈谈绝对定位和相对定位的区别,和需要注意的问题;position:absolute|relative;

首先position:absolute|relative; 前者是绝对定位,后者是相对定位: position属性的四个值: static,relative,fixed,absolute; 重点重点重点: 相对定位元素经常用来作为绝对定位元素的容器块: absolute 定位使元素的位置与文档流无关,因此不占据空间. absolute 定位的元素和其他元素重叠.