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 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。
示例如下：
原始位置：
<html> <body> <span class="span-1" style="background-color:red;padding:10px;">1</span> <span class="span-2" style="background-color:blue;padding:10px;">2</span> <span class="span-3" style="background-color:green;padding:10px;">3</span> </body> </html>
相对位置：
<html> <head> <style type="text/css"> .span-2 { position:relative; top:10px; left:10px; } </style> </head> <body> <span class="span-1" style="background-color:red;padding:10px;">1</span> <span class="span-2" style="background-color:blue;padding:10px;">2</span> <span class="span-3" style="background-color:green;padding:10px;">3</span> </body> </html>
absolute：绝对定位的。它相对于它的父元素定位。应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置 position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性（重点）！
图示如下：
fixed： 固定定位，相对于视窗来定位，也就是说，即使页面滚动，它还是在原来的位置，就比如淘宝首页当页面被拉长整页后，右下角永远有一个回到顶部。
posted on
