"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;  
    300px;  
    overflow:auto;  
    /*position:relative;*/  
}  
#container>div {  
    background:red;  
    height:300px;  
    150px;  
    margin:0 auto;    
    position:relative;/*这句会触发bug*/  
}  
-->   
</style>   
</head>   
<body>   
<div id="container">  
    <div></div>  
</div>  
</body>  
</html>   

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

相关阅读:
文件上传到服务器，写入文件和读取文件
ajax
jquery.gritter 提示
lambda
C# 对象初始化器和集合初始化器
C# HttpHelper万能框架实现接口
插件总结
backbone.js之Model篇简单总结和深入(2)
backBone.js初识
利用 bugly 分析应用崩溃

原文地址：https://www.cnblogs.com/heimanba/p/3810651.html