首页 > 代码库 > 使用absolute模拟fixed定位，兼容ie6，及ie7 8 9和火狐谷歌等浏览器
使用absolute模拟fixed定位，兼容ie6，及ie7 8 9和火狐谷歌等浏览器
ie6不支持fixed定位，设定fixed定位后，ie6会认为是错误值，便会使用默认值static，可以使用absolute模拟fixed效果，并且兼容ie 7 8 9以及火狐等。
核心代码：
html,body {
margin: 0;
padding: 0;
height: 100%;
}
html { overflow: hidden; }
body { overflow: auto;}
#demo { position: absolute; }
原理：
html：Firefox，Opera，Safari默认是8，Chrome默认是0，IE系列默认是可视区域的高度。
body：Firefox，Opera，Safari，Chrome，IE8及以上默认是0，IE6和7默认是19。
默认html和body高度随内容而变化，当html设置100%，且超出部分隐藏后，文档大小只有一屏高度，超出部分不会显示，也没有滚动条，而body则是内容区，将body设置100%，且内容超出后自动产生滚动条，这样，其实内容超出后出现的滚动条是body的，模拟了默认浏览器出现的滚动条。这样对元素进行绝对定位后是相对于整个浏览器可视区域的0 0坐标为基准，而内容超出后是以body为基准出现滚动条，且body高度已经设置成和可视区域高度相同。所以即使拖拽滚动条，进行绝对定位的元素位置也不会变。
注：必须将html和body的padding和margin值清零，否则会出现不能填满浏览器的现象，且html和body不能设宽度，即使设置width: 100%也会出问题，ie6右边会有一部分空白无法填满浏览器。需要固定定位的元素，需要设置position: absolute。
例：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>使用absolute模拟fixed定位，兼容ie6，及ie7 8 9和火狐谷歌等浏览器</title>
<style type="text/css">
html,body {
margin: 0;
padding: 0;
height: 100%;
}
html { overflow: hidden; }
body { overflow: auto; background: red;}
#box {
width: 500px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;
background: blue;
}
</style>
</head>
<body>
<div id="box">固定内容</div>
<div style="height: 3000px">
<p>滚动内容</p>
<p>滚动内容</p>
<p>滚动内容</p>
<p>滚动内容</p>
<p>滚动内容</p>
<p>滚动内容</p>
<p>滚动内容</p>
</div>
</body>
</html>
使用absolute模拟fixed定位，兼容ie6，及ie7 8 9和火狐谷歌等浏览器