static（静态定位）对象遵循标准文档流中，top, right, bottom, left 等属性失效。
relative（相对定位）对象遵循标准文档流中，依赖top, right, bottom, left 等属性相对于该对象在标准文档流中的位置进行偏移，同时可通过z-index定义层叠关系。
absolute（绝对定位）对象脱离标准文档流，使用top, right, bottom, left 等属性进行绝对定位（相对于static定位以外的第一个父元素进行绝对定位）同时可通过z-index定义层叠关系。
fixed（固定定位）对象脱离标准文档流，使用top, right, bottom, left 等属性进行绝对定位（相对于浏览器窗口进行绝对定位）同时可通过z-index定义层叠关系。

迷糊不？（迷糊就对了，但是上面的基本定义在前端面试中是需要对答如流滴），下面我们通过实验来加深理解。

标准文档流
标准文档流指在不使用其他与排列和定位相关的特殊CSS规则时，元素的默认排列规则。

HTML文档中的元素可以分为两大类：行内元素和块级元素。 1.行内元素，是DOM树中的一个节点。不占据单独的空间，依附于块级元素，行内元素没有自己的区域。

2.块级元素，是DOM树中的一个节点。总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。

盒子在标准流中的定位原则：
margin控制的是盒子与盒子之间的距离，padding存在于盒子的内部它不涉及与其他盒子之间的关系和相互影响问题，因此要精确控制盒子的位置，就必须对margin有更深入的了解。
（1）行内元素之间的水平margin
当两个行内元素紧邻时，它们之间的距离为第一个元素的右margin加上第二元素的左margin。（2）块级元素之间的竖直margin
两个竖直排列的块级元素，它们之间的垂直距离不是上边的第一个元素的下margin和第二个元素的上margin的总和，而是两者中的较大者。这在实际制作网页的时候要特别注意。
（3）嵌套盒子之间的margin
这时子块的margin以父块的content为参考进行排列。
（4）margin设为负值
会使设为负数的块向相反的方向移动，甚至会覆盖在另外的块上。

1. static

默认的position值,无特殊定位，遵循标准文档流，不做过多解释。

这里写图片描述
图一：标准文档流

2. relative

这里写图片描述
图二：相对定位

由图二可见，relative是相对该对象处于标准文档流中的位置依据left,top进行定位（当然还可以使用right，bottom，本例仅作实验说明，其余读者自行验证），left,top 并不改变该对象原本在文档流中的占位空间。

这里写图片描述
图三：相对定位

由图三可见，当设置了margin属性时，该对象在标准文档流中的占维空间也随之改变。同理，padding也会改变相对定位的对象在标准文档流中的占维空间，如图四。

这里写图片描述
图四：相对定位

至此，relative（相对定位）大家已经很清楚了吧，下面看下absolute的用法。

3. absolute

这里写图片描述
图五：绝对定位

由图五可见，绝对定位脱离标准文档流，相对于static定位以外的第一个父元素，使用left,top（或right,bottom)进行绝对定位。值得一提的是在使用absolute定位时，必须指定left,top,right,bottom中的至少一个（否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从标准文档流，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间）。

如果同时设置了left/right 属性，那么left生效。同理top/bottom同时存在时，top生效。

这里写图片描述
图六：绝对定位

这里写图片描述
图七：绝对定位

由图六、图七可见，absolute实质上是相对于static定位以外的第一个父元素的border进行定位。

同时绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。

4. fixed

这里写图片描述
图八：固定定位

由图八可见，fixed定位也脱离了标准文档流，与absolute不同的是fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。

5. z-index

如果两个同级元素的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

关于position定位，以上。另外上面的实验均在https://jsfiddle.net/上完成。