请看下图：
即子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。
根源就是子元素的"position:relative"。目前只发现ie中有此问题。
页面源码：
<!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的注释还原即可。
以下是正常页面：
分享到：
相关推荐
解决这个bug很简单，在父元素中使用position:relative;即可解决该bug 我的办法：子元素设置绝对定位，父元素相对定位，这样overflow:hidden就不会失效了。 IE下CSS溢出隐藏失败(IE overflow:hidden失效) 复制代码...
可是在IE6下查看，却变成了right:1px的效果了： IE6还有奇数宽度的bug，解决方案就是将外部相对定位的div宽度改成偶数。查看源码： CSS代码 #out { width: 609px;/*这里宽度为奇数，bug就出现了！！改成偶数就OK了*...
多数情况下隐藏(设置display:none)一个元素，无需依次将其内的所有子元素都隐藏。非要这么做，有时会碰到意想不到的bug。
解决办法解决这个bug很简单，在父元素中使用position:relative;即可解决该bug。 代码bug重现 复制代码代码如下:<ul><li>我是很努力的前端博客，希望你会喜欢</li><li>我是很努力的前端博客，希望你会喜欢</li><li>我...
position:relative;border:1px solid;font:bold;text-decoration:none;list-style:none;}a:hover{display:block;color:#000;width:50px;}#cd{display:none;}a:hover #cd{display:block;background:#edecdc;border:1...
当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。
最近才发现IE6、IE7存在这样一个BUG：在滚动区域（DIV中）内，如果里面的标签使用了position（absolute/relative），则会飘出这个滚动区域，且不会随滚动条而滚动（静止不动）。如下所示（只在IE6和IE7中才会出现此...
第一个问题是fixed的tr在ie7中不能进行定位，而且td在定位后并不能保持在表格中的布局，这样在原表格插tr就没意义了。 ps：fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table，并把源tr克隆到...
tips[13] = '网站的三个要素中，内容永远最重要，功能其次，表现在最后。'; tips[14] = '从真实用户角度出发去考虑问题，投资人的意见只能作为参考。'; tips[15] = '真实世界中人们总是不得不被迫接受一些信息；而在...