static 是默认定位值，它的定位元素不受top、left、right、bottom的影响，也就是说你给元素设置这四个属性的任何值都没有效果
relative 相对定位，设置相对定位元素的top、left、right、bottom会使当前元素相对于当前位置做一定的偏移。
比如说在做表单布局的时候，有时候label的值并没有和输入框上下居中对齐，它有一点点偏下，效果不是很好看，这个时候我们可以给label向上设置一下偏移让他们居中对齐
absolute是绝对定位，绝对定位的元素相对于最近的定位祖先元素进行定位，如果没有定位祖先元素，那么就按body定位
absolute最典型的例子就是结合relative一块完成效果，比如我有一个p，它是在页面居中的，但是它的宽度和高度是动态的，我们还有一个span标签希望永远在这右下角10px的位置，这个时候我们就可以利用absolute完成
fixed 是相对视口定位的，简称浮云定位，这个意味着就像你滚动页面，它始终位于同一个位置，top、left、right、bottom用于设置当前元素的位置。
常用的例子就是页面右下角，滚动到顶部的的功能，我们可以对这个元素设置fixed浮动定位，当用户一直向下滚动浏览网页后，想一下子回到顶部，它只要点这个元素就行了，因为之个元素是浮云定位，所以永远是在用户可视范围的右下角
点击回顶部，或是回某个位置，主要是设置scrollTop。
下面是一个简单回顶的例子：
下面的例子是缓慢回顶。如果将快速回顶，可以直接让scrollTop = 0；就可以了。
<style>body{height:5000px}
input {position:fixed bottom:0px right:0px}
</style>
<script>
window.onload=function(){
var oBtn = document.getElementById('btn')
var timer = null
var bFlag = false
oBtn.onclick=function(){
moveScroll(0,3000)
}
window.onscroll=function(){
if(bFlag)
{
clearInterval(timer)
}
bFlag=true
}
function moveScroll(target,time)
{
var start = document.documentElement.scrollTop || document.body.scrollTop
var dis = target - start
var count = Math.floor(time/30)
var n=0
clearInterval(timer)
timer = setInterval(function(){
n++
bFlag=false
document.documentElement.scrollTop = start + dis*n/count
document.body.scrollTop = start+dis*n/count
if(n==count)
{
clearInterval(timer)
}
},30)
}
}
</script>
