CSS定位

CSS有三种基本的定位机制：普通流、绝对定位和浮动。

普通流

在CSS中一切皆为框，所谓的框包括块级元素（div、h1、p等）和行内元素（a、span、img等），普通流定位的原则就是：块级元素从上到下垂直排列，行内元素从左到右水平排列，也就是说块级元素会主动换行，行内元素不换行。除非专门指定，所有框都服从普通流定位。
需要特别说明的是，“相对定位”(position:relative)也属于普通流定位，那么“相对”谁呢？相对的就是元素本身应该在普通文档流中的位置，在此基础上，进行上、下、左、右的移动。需要注意在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。

绝对定位

绝对定位(position:absolute)是相对于最近的已定位的祖先元素。不论是块级元素还是行内元素，采用绝对定位后都会变成一个块级元素，且元素原来在文档流中的空间会关闭，即元素会被从文档流中删除。因此，绝对定位的元素会影响其兄弟元素的正常定位，会被兄弟元素当作“不存在”，但不影响其子元素的正常定位。

浮动

浮动的框可以向左（float:left）或向右（float:right）移动，直到它的外边缘碰到它的包含框或者另一个浮动框的边框为止，且浮动框也不在文档的普通流中。如下图左所示，如果浮动框的包含框太窄，无法容纳浮动框，那么浮动框会向下移动，直到有足够的空间容纳它。如下图右所示，如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：