首先应该明白什么是流?这个估计也很容易明白,我就不说了。顺便说下,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 属性的值。