[TOC]
脱离文档流：是指元素不占据标准流的空间
脱离文档流和层级是不同的概念，有层级不一定脱离了文档流
- static：正常文档流，是position的默认值
- relative：相对于元素正常位置进行定位，并且原本所占据的空间仍会保留，有层级概念
- absolute：脱离标准流，不占据空间，后面的元素会占据它的位置，相对于值不为static的第一个父元素进行定位，有层级的概念。元素的宽高会失效
- fixed：相对于浏览器有效区域定位（如果设置了top、bottom、left、right），否则与absolute一样相对于非static父元素，被固定在了页面上，不会随着滚动而滚动，元素的宽高会失效
- 行内元素设置了浮动就会成为块级元素
static
static是position默认值，一般配合JS来用，来取消一个元素的定位
relative
不会脱离标准流，但是它的层级比标准流高，如果通过偏移和其他标准流元素重合会覆盖标准流元素，如果没有设置背景的话底层的元素文字会透过来。可以使用z-index来改变relative元素的层级
由于relative并未脱离标准流，所以relative的left、right、top、bottom都可能会引起溢出。
父元素定位到哪，子元素也会跟随到哪
absolute
absolute会在标准流之上，后面的元素会移动过来。
z-index可以改变层级关系，如果将absolute元素 的z-index设置为小于0的，则absolute元素会被标准流盖住。如果两个元素同时设置为position:absolute，则后来者居上，越后面的层级越高，会覆盖住前面的
fixed
脱离标准流，不占据空间，相对于浏览器有效区域定位（如果设置了top、bottom、left、right），否则与absolute一样相对于非static父元素
fixed会遮挡其他元素，解决这个问题可以设置border-x，但是在IE7以下不支持border-x属性，可以加一个div，给这个div设置高度将元素撑出来
fixed的百分比是参照视口来计算的，无论有没有父元素