1.static
无特殊定位，对象遵循正常的文档流。top，right，bottom，left等属性不起作用
2.relative
对象遵循正常的文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index
3.absolute
对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index
4.fixed
对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index
什么是文档流？
将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。 只有三种情况会使得元素脱离文档流，分别是：浮动，绝对定位和相对定位。
静态定位（static）
它是html元素默认的定位方式，即使我们不设定元素的position属性是默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top，right，bottom，left，z-index等属性是无效的。
相对定位（relative）
从字面上看，其主要特性：相对。但是它相对的是什么呢，这是个重点，做个测试，大家就会明白了：
<style type="text/css">
#first { width: 200px; height: 100px; background: red; position: relative; top: 20px; left: 20px;}
#second{ width: 200px; height: 100px; background: blue;}
</style>
<body>
<div id="first"> first</div>
<div id="second">second</div>
</body>
相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，可以说它是static到absolute的一个中间过渡属性，最重要的它还占有文档空间，而且占据的文档空间不会随top/right/left/bottom等属性的偏移而发生变动 top/right/left/bottom属性是不会对relativ定位的元素所占据的文档空间产生偏移，那么margin/padding会让该文档空间产生偏移吗？答案是一定的，自己动手试一下
绝对定位（absolute）
使用absolute定位的元素脱离文档流后，就只能根据祖先类元素（父类以上）进行定位，而这个祖先类还必须是position非static方式定位的，eg：p元素使用absolute定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素（注意，一定要是直系祖先才算）直到html为止，这里还需要注意的是，relative和static方式在最外层是以body标签为定位原点的而absolute方式在无父级是position非static定位时是以html作为原点定位
<html>
<style type="text/css">
html{border:1px dashed green;}
body{border:1px dashed purple;}
#first{ width: 200px;height: 100px;border: 1px solid red;position: relative;}
#second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;}
</style>
<body>
<div id="first">relative</div>
<div id="second">absoult</div>
</body>
</html>
在absolute定位中添加margin/padding属性：
祖先类的margin会让子类的absoulte跟着偏移，而padding却不会让子类的absoulte发生偏移。总结一下，就是absoulte是根据祖先类的border进行的定位
