CSS 定位

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位，即普通流中的元素位置由元素在 X(HTML) 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

position的属性：
static:无特殊定位，对象遵循HTML定位规则。
absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。如果父元素已经定位，那么子元素的绝对定位是相对于父元素的，否则则是相对于最初包含块的。
relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，绝对定位是相对于父元素的。
fixed:元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

相对定位：
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

绝对定位：绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同。
绝对定位的元素的位置相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初包含块。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。  

浮动定位：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。