fixPosition固定div位置（跨浏览器浮动定位）

在IE Tester V0.4.1 IE6/+,Firefox3.5,Chrome3.0,Opera 9.64以及Safari4.0.3下测试通过

点击运行示例

代码（看着可能比较多，大部分是在处理兼容ie6）：

/*  
 *author:sohighthesky  
 *From:http://www.uedsky.com/  
 *Date:2009-11-1  
 */  
/*  
 *target 要固定的元素对象，也可以是元素的id  
 *pos:object/string 指定固定到的位置，类型为object时，使用json方式如{right:200,bottom:50} ，为string时可选参数如下：  
 *cc,正中间,lc  左边,rc 右边  
 *lt  左上角,ct 上边,rt  右上角  
 *lb 左下角,cb 底部,rb 右下角  
 */ 
var fixPosition=function(target,pos) {
    this.target= this.g(target);
    this.pos=pos;
    this.init();//
};

fixPosition.prototype={
    isScroll:navigator.userAgent.indexOf("MSIE 6")!=-1 ||(window.ActiveXObject && document.compatMode!="CSS1Compat"),
    ae:function(e,call) {
        if(window.addEventListener)
            window.addEventListener(e,call,false);
        else
            window.attachEvent("on"+e,call);
    },
    g:function(id) {
        return typeof(id)=="string"?document.getElementById(id):id;
    },
    setPos:function() {//设置位置
        var de;
        if(document.compatMode=="CSS1Compat")de=document.documentElement;
        else de=document.body;
        
        if(typeof(this.pos)=="string") {//
            if(!this.isScroll){
				switch(this.pos.charAt(0)) {
					case "l":
						this.target.style.left="0px";
						break;
					case "r":
						this.target.style.right="0px";
						break;
					default:
						this.target.style.left=(de.clientWidth-this.target.clientWidth)/2 +"px"; 
						break;
				}
				switch(this.pos.charAt(1)) {
					case "t":
						this.target.style.top="0px";
						break;
					case "b":
						this.target.style.bottom="0px";
						break;
					default:
						this.target.style.top=(de.clientHeight-this.target.clientHeight)/2 +"px"; 
						break;
				}
			}else {
				switch(this.pos.charAt(0)) {
					case "l":
						this.target.style.left=de.scrollLeft+"px";
						break;
					case "r":
						this.target.style.left=de.scrollLeft+de.clientWidth-this.target.clientWidth +"px";
						break;
					default:
						this.target.style.left=de.scrollLeft+((de.clientWidth-this.target.clientWidth)/2)+"px";
						break;
				}
				switch(this.pos.charAt(1)) {
					case "t":
						this.target.style.top=de.scrollTop+"px";
						break;
					case "b":
						this.target.style.top=de.scrollTop+de.clientHeight-this.target.clientHeight+"px";
						break;
					default:
						this.target.style.top=de.scrollTop+((de.clientHeight-this.target.clientHeight)/2)+"px";
						break;
				}
			}
        } else {
            if(!this.isScroll) {
                for(var p in this.pos)
                    this.target.style[p]=this.pos[p]+"px";
            } else {
                for(var p in this.pos) {
                    switch(p.toLowerCase()) {
                        case "left":
                            this.target.style.left=de.scrollLeft+this.pos[p]+"px";
                            break;
                        case "right":
                            this.target.style.left=de.scrollLeft+de.clientWidth-this.target.clientWidth-this.pos[p]+"px";
                            break;
                        case "top":
                            this.target.style.top=de.scrollTop+this.pos[p]+ "px";
                            break;
                        case "bottom":
                            this.target.style.top=de.scrollTop+de.clientHeight-this.target.clientHeight-this.pos[p]+"px";
                            break;
                    }
                }
            }
        }
    },
    init:function() {
        if(!this.pos)
            throw Error("Invalid arguments [pos].");
        if(!this.isScroll)
            this.target.style.position="fixed";
        else
            this.target.style.position="absolute";
        var timer,o=this;
        this.ae("resize",function() {//支持fixed的浏览器窗体大小改变时也重置位置，防止中间无法居中
            clearTimeout(timer);
            timer=setTimeout(function() {
                o.setPos();
            },30);
        });
        if(this.isScroll) {//滚动
            this.ae("scroll",function() {                
                clearTimeout(timer);
                timer=setTimeout(function() {
                    o.setPos();
                },30);
            });
        }
        this.setPos();
    }
}
/*
 *强烈建议您的页面加上w3c的dtd
 */

示例代码：

<!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>
    <title>固定元素位置</title>
    <style type="text/css">
      body,th,td    {font-size:10pt;font-family:Tahoma,Arial,'/5b8b/4f53','/5FAE/8F6F/96C5/9ED1';}
      a  	{color:#3366CC; text-decoration:none;}
    #div1 div {
		width:300px;
		height:140px;
		border:solid 1px #0066CC;
		text-align:center;
		vertical-align:middle;
		line-height:1.8;
    }
    </style>
</head>
<body>
	<div id="div1" style="height:2000px;width:2000px">
	<div pos="cc">author:<a href="http://hi.csdn.net/sohighthesky">sohighthesky</a><br/>
	Date:2009-11-1
	</div>
	<div pos="lt">左上角</div>
	<div pos="ct">上边	</div>
	<div pos="rt">右上角	</div>
	<div pos="lc">左边</div>
	<div pos="rc">右边</div>
	<div pos="lb">左下角</div>
	<div pos="cb">下边</div>
	<div pos="rb">右下角</div>
	<div>自定义位置1:{left:60,top:160}</div>
	<div>自定义位置2:{right:200,bottom:50}</div>
	</div>
</body>
<script type="text/javascript" src="fixPosition.js"></script>
<script type="text/javascript">
var divs=document.getElementById("div1").getElementsByTagName("div");
var length=divs.length;
for(var i=0;i<length-2;i++) {
	var cur=divs[i];
	new fixPosition(cur,cur.getAttribute("pos"));
}
new fixPosition(divs[length-2],{left:60,top:160});
new fixPosition(divs[length-1],{right:200,bottom:50});
</script>
</html>

另外还可以参考：http://www.caihong.cc/?p=119