定位的坐标原点HTML,html 定位

语法：

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左上角坐标原点)

是

是

relative

相对定位

否

参照自身初始位置进行偏移

是

否

fixed :IE5.5及NS6尚不支持此属性 。可以使元素在屏幕上保持固定，下拉滚动条，位置也不改变

知识点说明：

(1)文档流是文档中可显示对象在排列时所占用的位置，浏览器解析html时，会按从上到下的顺序，把元素放到相应位置。如div，p占用文档流，他们本身是块级元素(块级元素无论width是否占满网页宽度，都会占用一行)，在文档流则从上到下分行显示div和p。

示例1：

 

View Code

我是div标签

我是p标签

而如果想让div位置脱离文档流偏移，让解析时，把div脱离文档流，相对左上角原点向右偏移400px，把p放到文档流中，占用div本来的位置，则可以用绝对定位。

示例2：

 

View Code

我是div标签

我是p标签

这时候我们可以看出，绝对定位后，div偏离了文档流，不再是从上到下显示，而是把div偏移，p标签占用本来的文档流位置。

(2)偏移参照对象:

absolute绝对定位的偏移参照物是最近的position非static的父标签。

示例3：

 

View Code

我是大div，我根据body向右偏移100px，小div要根据我的左上角原点偏移

我是div标签

我是p标签

大divposition非static(默认是static)，可以是absolute，relative，小div都会参照大div定位。

示例4：

如果父标签都是static，则再向上一级找非static的父标签，直到找到body。如果父级都是static(文档流)，则相对整个文档进行偏移(即body左上角坐标原点)

为了显示方便，先放点东东占位吧

为了显示方便，先放点东东占位吧

为了显示方便，先放点东东占位吧，大概占了60px了吧

 

View Code

我是大div，但我是static，只好让小div根据body定位了

我是div标签，根据body，向下偏移100px；

relative相对定位的参照对象是自己的初始位置。

示例5：

 

View Code

为了显示方便，先放点东西占位吧。为了显示方便，先放点东西占位吧。为了显示方便，先放点东西占位吧。大概占了60px了吧

我是div标签，默认static，未进行定位

示例6、

 

View Code

我是div标签，相对定位，根据初始位置向下偏移100px

(3)原先位置是否会被其他元素占用:

绝对或相对定位后，原先的位置会被其他元素占用，如示例2

(4)是否 能通过z-index层叠:

绝对定位的层可以层叠。

示例7、

 

View Code

我是div1，绝对定位，没有设置z-index,虽然高度和div2一样的，但div2会把我覆盖

我是div2，绝对定位，我能把div2覆盖

示例8、

我是div1，我的z-index比div2高，所以把div2覆盖

我是div2，我的z-index是默认值，比div1低