一、position的属性值
首先基本了解下position的各个属性值：
1、static：默认值。没有定位，元素在正常显示出现（它将忽略top、bottom、left、right、z-index声明）
2、relative：生成相对定位的元素，相对于其正常位置进行移动。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
3、absolute：生成绝对定位的元素，相对于position属性定义为static之外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
5、sticky：在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
这篇文章我们主要对relative属性值和absolute属性值进行说明。
二、relative
1、定位为relative的元素，虽然可以脱离正常的文档流进行移动，但是其本身在文档流中占据的位置仍然保留。如下图所示：
三、absolute
定位为absolute的元素，也是脱离正常的文档流，并且其本身在文档流中占据的位置不再保留。如下图所示：
其中黄色背景为absolute的元素，蓝色背景被普通元素，红色背景为二者的父元素（父元素被定义为relative）。
如图所示，absolute元素进行移动是相对于离它最近的定义了position属性并且属性值不为static的父层元素进行移动（这个父层元素可以不是其直接父层）。如果其父层全部都未定义除static之外的position属性，那么它将相对于浏览器显示窗体元素进行移动而非html标签元素。
1、absolute元素的父元素并没有设置position属性，而其祖父元素设置了position属性，absolute元素则相对祖父元素进行移动。
2、absolute元素的父元素并设置position:static属性，而其祖父元素设置了position:relative属性，absolute元素则相对祖父元素进行移动。
3、absolute元素的父元素并设置position:relative属性，祖父元素也设置了position:relative属性，absolute元素则相对父元素进行移动。
4、absolute元素的父元素和祖父元素都没有设置position属性，absolute元素则相对浏览器显示窗体元素(注意：不是html元素)进行移动。
5、如下图所示，在没有设置移动属性(left,right,top,bottom)时，absolute元素处于正常布局中所处的位置，只是属于“浮在空中”的状态，不占据文档流空间。
四、注意
对于上文中，absolute元素如果其父层全部都未定义除static之外的position属性，那么它将相对于浏览器显示窗体元素进行移动而非html标签元素有异议的，我们可以试试一下的代码一试便知。
body,html {
margin-top:50px;
height:300px;
}
div {
width:200px;
height:200px;
background:red;
position:absolute;
top:20px;
}
结果分析：
1、如果div元素距离顶部只有20px，则div是相对浏览器显示窗口移动。
2、如果div元素距离顶部为70px（html的margin-top:50px + top:20px），则div是相对html元素移动。
3、如果div元素距离顶部为120px（html的margin-top:50px + body的margin-top:50px + top:20px），则div是相对body元素移动。
