【概念】
static:默认取值，位置跟书写的顺序一样。
relative:相对位置，参照物是自己本身,当相对运动时,只影响自己的显示位置,且依然占据原先的位置，后边的标签流不会受到影响。
absolute:绝对定位，参照物是离本元素最近的一个(有relative或absolute属性)定位的“祖先”，如果没有这个父容器，那默认就是body。
fixed:真正的绝对定位，其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变，也就是说永远可以看到，这 个做一些彩单的时候可以用。可惜的是ie还不支持
【relative VS absolute】
relative 参照物是自己 依然影响原先标签流 依然占位
absolute 参照物是已定位的父标签 不影响影响标签流 相对父标签的新层
【relative absolute 嵌套】
由于relative有两种概念的位置，一个是原先标签流的位置，一个是当前显示的位置,如果在relative的里面再嵌套一个absolute 的块标签，那这个标签是相对与那个位置移动呢？答案是相对当前显示的位置来偏移,看下面的例子:
<HTML> <HEAD></HEAD> <BODY> <style type="text/css"> div{float:left;} .box { position:relative; width:300px; height:300px; background-color:green; } .boxa { position:relative; width:100px; height:100px; background-color:yellow; top:100px; left:200px; } .boxb { position:relative; width:100px; height:100px; background-color:gray; } .boxaa { position:absolute; width:50px; height:50px; background-color:blue; color:yellow; top:50px; left:50px; } </style> <div class="box"> <div> <div class="boxa">A<div class="boxaa">a</div></div> <div class="boxb">B</div> </div> </div> </BODY> </HTML>
显示结果：
