Html position（static | absolute | fixed | relative）定位

语法： 
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>