使用position:fixed来固定一个HTML元素在屏幕上的位置

position:fixed

在CSS2标准中，规定了position有一个fixed的属性值，当一个HTML元素设定为fixed的时候，配合top、left可以将一个HTML元素固定在屏幕上。示例如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
.out {
  border:1px solid #ff4400;
  padding:5px;
  position:fixed;
  top:60px;
  left:135px;
}
</style>
</head>
<body>
<div class="out">www.blabla.cn</div>
<script type="text/javascript">
for(var i=0; i<100; i++) {document.write("Hello, world!<br />");}
</script>
</body>
</html>

测试这段代码可以发现，无论如何拉动浏览器的滚动条，一个橙色边框的方块始终会悬浮在窗口固定的位置上。当然，如果你的浏览器是Firefox或者IE 7及以上版本，一切都很好，如果你的浏览器只是IE 6，那继续看下去。

兼容IE 6

在IE 6里面，position不支持fixed属性。不过我从网上找到了一个巧妙而简单的方法来兼容这个傻浏览器。只要在CSS文件或者style中增加下面的定义，就可以了。

* html {overflow-y:hidden;}
* html body {height:100%;overflow-y:auto;}
* html .out {position:absolute;}

说这个方法巧妙，是因为增加的定义仅仅对IE 6有效，在IE 7或者Firefox里面，这段东西会被浏览器无视；说这个方法简单，是因为仅仅用overflow-y、height:100%和position:absolute配合就实现了和fixed相近的结果。

完整的示例代码如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
.out {
  border:1px solid #ff4400;
  padding:5px;
  position:fixed;
  top:60px;
  left:135px;
}

/* for stupid IE 6 */
* html {overflow-y:hidden;}
* html body {height:100%;overflow-y:auto;}
* html .out {position:absolute;}
</style>
</head>
<body>
<div class="out">www.blabla.cn</div>
<script type="text/javascript">
for(var i=0; i<100; i++) {document.write("Hello, world!<br />");}
</script>
</body>
</html>