一、CSS 定位和浮动
它们代替了多年来的表格布局。
定位的思想很简单，相对于正常位置、相对于父元素、另一个元素甚至是浏览器窗口的位置。
浮动在 CSS1 中被首次提出。浮动不完全是定位，当然也不是正常的流布局。
二、一切都是框
display 属性设置元素是什么框类型。其属性为 block、inline、none 时，分别表示块级元素、行内元素和不显示(也不占用文档的空间)。
三、定位机制
有三种基本的：普通流、绝对定位和浮动。
在下面的小节里，会给你详细讲解相对定位、绝对定位和浮动。
四、定位(position)属性的四个值
static、relative、absolute 和 fixed。
static(默认)：正常显示的位置
relative：相对于正常显示位置，偏移后的位置。发生偏移后，原本所占的空间仍然保留。
absolute：相对于包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流里的所占空间不再保留，就好像元素原来就不存在一样。
fixed：表现类似 absolute，不过它的包含块是浏览器的窗口。
其实，相对定位实际上被看作是普通流定位中的一部分，因为元素的位置相对于它在普通流中的位置。
五、相对定位 relative
这是一个非常容易掌握的概念。一个元素被设置为相对定位，那就是相对于它的起点(正常的位置)垂直或者水平移动一段距离。
举个例子：如果一个元素，要相对于正常位置，往下 20 像素，往右 30 像素，那么它的 CSS 代码应该这样↓
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
我们看页面最终效果的话，会更加直观：
注意，使用相对定位进行移动，原来元素所占据的空间仍然保留，不仅如此，它还会覆盖其它的框。
六、绝对定位 absolute
绝对定位的元素是一个块级框，而不论它在正常流中是何种类型的框。
与相对定位不同的是，绝对定位会从文档流里完全删除，所以不占据空间，并相对于其包含块定位。在普通流里布局的元素，就当作绝对定位元素不存在一样：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
这里的包含块是指最近的被定位的(positioned)元素。被定位的元素是指 position 的取值除 static 之外的元素。
如果绝对定位的元素往上一级、往上上一级……到文档的 body 元素了，如果还没找到包含块，那么它的包含块就是 body，它最终相对于 body 元素定位！
七、绝对定位 fixed
与 absolute 类似，不过它是相对于视窗(浏览器窗口)定位的。通常一张页面的顶部导航栏就是用 fixed 定位的。
但，移动浏览器对 fixed 的支持很差。不过，这里有解决方案。
八、浮动
关于浮动，并不难，但有一大堆要说的，放在以后吧。
(完)