HTML flow

上篇文章中提到HTML流，在这里稍微展开一下吧。

HTML流，其实蛮有趣的，可以将一个浏览器窗口想象成左上角有吸引力，所有页面上的元素排版的时候，都会按HTML中从上倒下的出现顺序，向左上角靠拢。

页面元素就像飘在水中树叶。这也就是为什么叫HTML flow。

实际上浏览器正是这么实现的，它会根据每个HTML元素的宽高在窗口中从左上到右下流动排版。

不过，我上面所说的原则是HTML元素使用默认的样式属性。如果我们想要固定的位置怎么办呢？

在样式属性(style)中，有一项position，从CSS2开始支持的属性，兼容浏览器(IE4+，Netscape4+，Firefox1+，Opera 5+，Safari1+)，目前绝大多数浏览器都支持。

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的子元素。