position属性

　　position属性可以调整DOM元素在浏览器中的位置，能够很好的体现HTML普通流这个特征。重点在于应用了不同的position值之后是否有脱离普通流和改变Display属性这两点。

　　position的几个常用属性值：static，relative，absolute，fixed。

 static：

　　默认值，我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right在position为static的情况下无效。其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的普通流中。

 relative：

　  相对定位。相对于原本自己的位置，其他的元素样式不会发生改变。换句话说，在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。

示例如下：

原始位置：

 

123

 

相对位置：

123

 

 absolute：绝对定位的。它相对于它的父元素定位。应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置 position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性（重点）！

图示如下：

fixed： 固定定位，相对于视窗来定位，也就是说，即使页面滚动，它还是在原来的位置，就比如淘宝首页当页面被拉长整页后，右下角永远有一个回到顶部。