BlaBla.cn

用position:fixed 固定一个HTML元素在屏幕上的位置，实现对联广告效果

很多站长要在网页上加广告，有一种叫做对联广告，就是说网页居中显示，两边留出空位，对联广告就放在两边的空位里，如果用户拖拉浏览器的滚动条浏览下文，当屏幕滚动时，对联广告还一直在屏幕的某个固定位置，象块顽固的膏药，永远贴在屏幕的某个固定位置。

网上有不少 Javascript 代码做对联广告，其实不用那么复杂，用 CSS 的 position:fixed 属性就可以达到对联广告的效果。

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.blablar.com</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.blablar.com</div>
<script type="text/javascript">
for(var i=0; i<100; i++) {document.write("Hello, world!<br />");}
</script>
</body>
</html>

点击链接查看示例效果

作者或编者：蚕估 Zegoo 最近更新日期：2008-05-28

参考来源：www.BlaBla.cn