"position:relative"在IE中的Bug

请看下图：

即子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。根源就是子元素的"position:relative"。目前只发现ie中有此问题。
页面源码：

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>relative bug</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
<!--
#container {
background:blue;
height:100px;
width:300px;
overflow:auto;
/*position:relative;*/
}
#container>div {
background:red;
height:300px;
width:150px;
margin:0 auto;
position:relative;/*这句会触发bug*/
}
-->
</style>
</head>
<body>
<div id="container">
<div></div>
</div>
</body>
</html>

解决方法：为父元素也添加"position:relative"设置。在上例中，只需把#container的注释还原即可。
以下是正常页面：

"position:relative"在IE中的Bug

时间： 2024-08-18 18:54:37

"position:relative"在IE中的Bug的相关文章

ie6/7下给table的行tr 添加position:relative;的奇特bug,求大神告知

代码: <!DOCTYPE html> <html> <head> <title>ie6/7下给table的行tr 添加position:relative;的奇特bug,求大神告知</title> <style> * { padding: 0; margin: 0; } table tr { position: relative;float:left;overflow:hidden;z-index:1;height:100%;widt

css中position:relative的真正理解

其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的. position属性是用四种定位.默认的是static. position:absolute(绝对定位) --是脱离文档流,相对于父级元素(包含这个position:relative)定位,当然如果没有,那就是相对于body定位的. position:relative(相对定位) --单独使用,

解决td标签上的position:relative属性在各浏览器中的兼容性问题

在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口进行定位: relative:生成相对定位的元素,相对于其正常位置进行定位: static:默认值,没有定位: inherit:继承父元素的position值: 如果一个块A要在块B中进行绝对定位,则我们可以把块A的position值定为absolute,把块B的属性值定为relative,这样,块

CSS中"position:relative"属性与文档流的关系

前言近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:"position:relative"不会导致元素脱离文档流. 博文地址:CSS中"position:relative"属性与文档流的确切关系 "relative"与文档流说到标准,最权威的自然莫过于CSS标准文档.经过一番繁琐的查找之后(w3c网站

CSS中margin和position:relative的定位问题

一.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .bb{ background: burlywood; height: 50px; margin-left: 100px; width: 100%;

css中position:relative和overflow:hidden的问题

<div style="height:100px; width:100px; background:#CCC; overflow:hidden;"> <div style="height:300px; width:90px; background:#999; position:relative;"></div> </div> ↓ 解决方案:将父标签的position也设置成relative,代码如下: <div

z-index在IE中的bug

ie 中z-index的设置必须父元素也要设置,只设置子元素在ie7是无效的 http://blog.csdn.net/james521314/article/details/8555080 Z-index在IE中失效的解决办法分类: web前端 2013-01-30 10:27 1294人阅读评论(0) 收藏举报 Z-index是让元素漂浮起来的一个属性,在IE6.7中无论你把Z-INDEX的级别设置的有多高,它就是不漂浮起来.在CSS中,要让z-index起作用有个小小前提,就是元素的

Android实际开发中的bug总结与解决方法（一）

Android实际开发中的bug总结与解决方法(一) Android开发中有很多bug,我们是完全可以在线下避免的,不要等到线上报的BUG的再去修复.下面是我在实际开发中遇到过的bug和解决方法. BUG 1: java.lang.RuntimeException: Unable to start activity ComponentInfo

position relative

position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:static) 如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该给#demo相对定位,#sub绝对定位. absolute是相对于自己最近的父元素来定位的,如果你不给#demo相对定位,那么#sub的绝对定位就是相对于body来定位的. relative是相对于自己来定位的,例如:#demo{position:relativ