先总结下position的其中2个用法（absolute、relative）
在用JS做一些动画效果的时候absolute经常会用到，因为它是会脱离文档流。
官方的解释就去看手册吧，这里我就写下我的测试结果。
1、position:absolute;相对浏览器的绝对大小，所以CSS手册里说它是进行绝对定位，而且它是脱离文档流的。何为绝对大小?绝对大小即整张网页的大小，有绝对大小自然有相对大小，相对大小即浏览器的视口，就是我们不滚动能看到的，因为有些网页的内容较多，它的高度可能很大，所以会出现滚动条，相对大小不包括滚动下面的内容，只是我们能看的部分！
2、position:relative;相对定位,不会脱离文档流！相对于它的文档流的前一个对象（我自己想的……也可以理解上下文）根据left和top来定位。依自己的display属性相对的前一对象的边位置也有所不同。
首先说比较特殊的一个情况：
自己display：inline前一对象inline，则会相对于前一对象上边框进行上偏移，对右边框进行左偏移，即2个对象都是在同一行里，如图1。
1 <style type="text/css">
2 #demo3{width:200px; height:200px; background:#666; position:relative; left:200px; /*top:50px;*/}
3 </style>
4 <span style="border:2px solid #F00" style="width:300px;">参照物1</span><span id="demo3">relative</span>
图1
只有以上这种用情况下编辑特殊，其它情况下则其实是另一起一行相对于父容器左边偏移，前一对象的下底进行上偏移，relative就完了。
那么接下来再说说absolute的情况，都知道是绝对定位，前面提到了浏览器的绝对大小，那么它其实是对浏览器的绝对大小来进行偏移的，如图2！
图2
对于以上论述过于片面,请看官方解释点这里进入.
完。
