先总结下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

　　对于以上论述过于片面,请看官方解释点这里进入.

　　完。

转载于:https://www.cnblogs.com/authen/archive/2009/12/22/1630050.html