js中Dom对象的position属性

首先应该明白什么是流？这个估计也很容易明白，我就不说了。顺便说下，float设置了这个属性就暂时脱离了流的存在，clear后才会到流里面。

position:absolute| fixed | relative| static | inherit

默认的HTML流属性其实就是指position:static。如果我们想要在页面上固定显示元素，就选择absolute，它是以页面左上角为(0,0)，根据top,left,width,height来布局的，注意这里是根据页面布局。fixed是当前窗口布局，也是左上角为(0,0)，不过，fixed是窗口布局，也就是说会根据滚动条一起移动，相对于当前窗口的位置不变。

relative相对位置，是指子节点和父节点的关系。当一个子节点在父节点中时，默认的position就是relative。在子节点包含在父节点中，这个时候就算你设置的是子节点是absolute，这是也会成为relative，也就是相对于父节点的左上角排版。这点其实也很容易理解，没有绝对，只有相对。HTML中所有的元素都是document的子元素。

接着详细说下各种的特点：

（1）static布局是默认，假如在这种布局，他是没有定位的，而且不会继承父元素的属性，W3C文档里面还说忽略 top, bottom, left, right 或者 z-index 声明，他是存在于流里面的。

（2）relative布局是相对布局，假如父元素用了这种布局，那么子元素就是相对于父元素的绝对定位，一般配合top,right,bottom,left来使用，这个布局也是存在于流里面的。

（3）fix布局是“浮动布局”，相对于浏览器窗口的绝对布局（在上下滚动页面时），一般配合top,right,bottom,left来使用，这个布局是脱离了流而存在的。（IE不兼容）

（4）absolute布局是绝对布局，相对于页面的绝对布局（在上下滚动页面时），一般配合top,right,bottom,left来使用，这个布局也是脱离了流而存在的。

（5）inherit布局我比较少用，文档里面他是规定应该从父元素继承 position 属性的值。