在css中position属性的可能值为：static,relative,absolute,fixed,默认为static
注：1、absolute,fixed设置的left,top默认都是相对body形成的坐标系而言的，而且当position为fixed时，只能相对body形成的坐标系；
注：1、absolute,fixed设置的left,top默认都是相对body形成的坐标系而言的，而且当position为fixed时，只能相对body形成的坐标系；
当position为：absolute时，可以设置其父级元素的position为：relative改变坐标系，例如：
<div style="border:1px solid green;position:relative;height:200px;">
<div style="margin:3px;border:1px solid blue;position:fixed;left:100px;top:5px;height:100px;width:20px;">good</div>
<div style="margin:3px;border:1px solid blue;position:absolute;left:100px;top:5px;height:100px;width:20px;">good</div>
</div>
<div style="margin:3px;border:1px solid blue;position:fixed;left:100px;top:5px;height:100px;width:20px;">good</div>
<div style="margin:3px;border:1px solid blue;position:absolute;left:100px;top:5px;height:100px;width:20px;">good</div>
</div>
2、relative的left，top是相对其前一个元素或者其父级元素而言的；
3、只有relative可以只用单个left,top来进行定位，其他fixed,absolute都必须使用(left,top)、(left,bottom)对来进行定位；
4、在ff和ie7以后的版本中都可以识别position:fixed，但在ie6中却不能识别，不过可以用expression来解决：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>fixed scroll</title>
<style>
#f_box{position:absolute;left:0;top:0;}
body > div#f_box{position:fixed;left:0;top:0;}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style>
div#f_box{
/*必须先赋值给一个变量，否则没有效果*/
left:expression((a = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)+'px');
top:expression((a = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)+'px');
}
</style>
<![endif]>
<![endif]-->
</head>
<body>
<div id="f_box" style="background:red;width:20px;height:50px;">
the fixed box
</div>
<script>
for(var i=0;i<100;i++)
document.write('some words<br>');
</script>
</body>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>fixed scroll</title>
<style>
#f_box{position:absolute;left:0;top:0;}
body > div#f_box{position:fixed;left:0;top:0;}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style>
div#f_box{
/*必须先赋值给一个变量，否则没有效果*/
left:expression((a = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)+'px');
top:expression((a = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)+'px');
}
</style>
<![endif]>
<![endif]-->
</head>
<body>
<div id="f_box" style="background:red;width:20px;height:50px;">
the fixed box
</div>
<script>
for(var i=0;i<100;i++)
document.write('some words<br>');
</script>
</body>
