position的取值

常规的4个值：
static（默认值，静态定位）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）

CSS3新增的3个值：
center
page
sticky

static

可以认为静态的，默认元素都是静态的定位，对象遵循常规流
此时4个定位偏移属性不会被应用，也就是使用 left，right，bottom，top 将不会生效

relative

相对定位，对象遵循常规流
参照自身在常规流中的位置通过 top，right， bottom，left 这4个定位偏移属性进行偏移时不会影响常规流中的任何元素

absolute

绝对定位，对象脱离常规流
偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到 body 元素
盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠
对于离自身最近的定位祖先元素，要满足两个条件：
1. 一定是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果没有则选择 body 为对照对象
2. 一定是要求祖先元素必须定位，也就是 position 的属性值为非 static 的都行
（常说的套路是：父相子绝）

top：没有定位的父辈元素时，参考点是页面左上角。反之参考点则是父父辈元素的左上角
bottom：没有定位的父辈元素时，参考点是浏览器首屏的左下角。反之参考点则是父辈元素的左下角。

绝对定位元素一定是块盒
绝对定位元素一定不是浮动      
绝对定位的儿子无视padding

fixed

固定定位，与 absolute 一致，对象脱离常规流
但是固定在浏览器视口，偏移定位是以视口为参考。当出现滚动条时，对象不会随着滚动

固定定位元素一定是块盒
固定定位元素一定不是浮动   

center（css3）

与 absolute 一致，对象脱离常规流
偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中

page（css3）

与 absolute 一致，
元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个 absolute 模式 

sticky（css3）

对象在常态时遵循常规流
它就像是 relative 和 fixed 的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如 fixed
该属性的表现是现实中你见到的吸附效果