CSS 的三种定位机制

CSS 有三种定位机制，分别是普通文档流、定位（相对，绝对，固定）和 浮动。

普通文档流

除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。

块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。

行内元素在一行中水平排列。

注意：

行内元素，在水平方向上修改水平尺寸(padding，margin，border)，能产生相应的效果，但修改垂直方向上的元素是无效的。

行内元素的 width 和 height 属性是无效的，行内元素的宽高是考内容撑起来的。

定位

css 中的 position 属性。默认是值 static，在普通流中显示，没有脱离普通流。

相对定位（relative）

当元素的位置发生改变时，定位元素的位置上相对它在普通流中的位置移动，不管移不移动，元素都占据它原本的位置。

半脱离文档流，相对自身位置偏移，其自身位置还在，依然占据文档流。

绝对定位（absolute）

absolute 相对于由它最近的 position 属性值不为static的祖先元素。若没有已定位的最近祖先元素，则它的位置就相对于最初的包含块（body）。

与相对定位不同，当元素被设置为绝对定位，则它之前的位置已经不存在，脱离了文档流。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性，来控制这些框的堆放次序。

固定定位（fixed）

相对于浏览器窗口，固定于屏幕的固定位置。其余的特点类似于绝对定位，脱离了文档流。

浮动

通过设置 float 属性来实现。脱离了文档流，但是没脱离文本流。

父元素会无视他，因此无法获取其高度，这也就是浮动元素父元素高度塌陷的原因。