语法：
position : static | absolute | fixed | relative
参数：
static : 无特殊定位，对象遵循HTML定位默认规则
absolute : 绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移。偏移后，原来的空间会被其他元素挤占
relative : 相对定位。对象不能想绝对定位一样层叠，但可依据left，right，top，bottom等属性在正常文档流中相对原先对象的位置进行偏移。原先的位置会被其他元素挤占。
| positon | 名称 | (1)是否将对象脱离文档流 | (2)偏移参照对象 | 偏移属性 | (3)原先位置是否会被其他元素占用 | (4)是否 能通过z-index层叠 |
| absolute | 绝对定位 | 是 | 相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移（即body左上角坐标原点） | left，right，top，bottom | 是 | 是 |
| relative | 相对定位 | 否 | 参照自身初始位置进行偏移 | left，right，top，bottom | 是 | 否 |
fixed : IE5.5及NS6尚不支持此属性 。可以使元素在屏幕上保持固定，下拉滚动条，位置也不改变
知识点说明：
(1)文档流是文档中可显示对象在排列时所占用的位置，浏览器解析html时，会按从上到下的顺序，把元素放到相应位置。如div，p占用文档流，他们本身是块级元素（块级元素无论width是否占满网页宽度，都会占用一行），在文档流则从上到下分行显示div和p。
示例1：
View Code
<div style="width:300px;height:100px;border:1px solid red">我是div标签</div> <p style="width:300px;height:100px;border:1px solid red">我是p标签</p>
而如果想让div位置脱离文档流偏移，让解析时，把div脱离文档流，相对左上角原点向右偏移400px，把p放到文档流中，占用div本来的位置，则可以用绝对定位。
示例2：
View Code
<div style="width:300px;height:100px;border:1px solid red;position:absolute;left:400px">我是div标签</div>
<p style="width:300px;height:100px;border:1px solid red">我是p标签</p>
这时候我们可以看出，绝对定位后，div偏离了文档流，不再是从上到下显示，而是把div偏移，p标签占用本来的文档流位置。
(2)偏移参照对象:
absolute绝对定位的偏移参照物是最近的position非static的父标签。
示例3：
View Code
<div style="width:900px;height:100px;border:1px solid black;position:absolute;left:100px">我是大div，我根据body向右偏移100px，小div要根据我的左上角原点偏移
<div style="width:300px;height:100px;border:1px solid red;position:absolute;left:400px">我是div标签</div>
<p style="width:300px;height:100px;border:1px solid red">我是p标签</p>
</div>
大divposition非static（默认是static），可以是absolute，relative，小div都会参照大div定位。
示例4：
如果父标签都是static，则再向上一级找非static的父标签，直到找到body。如果父级都是static（文档流），则相对整个文档进行偏移（即body左上角坐标原点）
为了显示方便，先放点东东占位吧</br>
为了显示方便，先放点东东占位吧</br>
为了显示方便，先放点东东占位吧，大概占了60px了吧</br>
View Code
<div style="width:900px;height:100px;border:1px solid black;">我是大div，但我是static，只好让小div根据body定位了
<div style="width:300px;height:100px;border:1px solid red;position:absolute;top:100px;">我是div标签，根据body，向下偏移100px；</div>
</div>
relative相对定位的参照对象是自己的初始位置。
示例5：
View Code
为了显示方便，先放点东西占位吧。</br>
为了显示方便，先放点东西占位吧。</br>
为了显示方便，先放点东西占位吧。大概占了60px了吧</br>
<div style="width:300px;height:100px;border:1px solid red;">我是div标签，默认static，未进行定位</div>
示例6、
View Code
<div style="width:300px;height:100px;border:1px solid red;position:relative;top:100px">我是div标签，相对定位，根据初始位置向下偏移100px</div>
(3)原先位置是否会被其他元素占用:
绝对或相对定位后，原先的位置会被其他元素占用，如示例2
(4)是否 能通过z-index层叠:
绝对定位的层可以层叠。
示例7、
View Code
<div style="width:300px;height:100px;background:red;position:absolute;">我是div1，绝对定位，没有设置z-index,虽然高度和div2一样的，但div2会把我覆盖</div> <div style="width:300px;height:100px;position:absolute;top:50px;background:yellow">我是div2，绝对定位，我能把div2覆盖</div>
示例8、
<div style="width:300px;height:100px;background:red;position:absolute;z-index:2">我是div1，我的z-index比div2高，所以把div2覆盖</div>
<div style="width:300px;height:100px;position:absolute;top:50px;background:yellow">我是div2，我的z-index是默认值，比div1低</div>
来源：https://www.cnblogs.com/CoderO3/archive/2013/03/16/2963233.html