三种定位机制：关于这个，有一种说法是这样的，普通流（有地方也叫文档流），相对定位，和绝对定位。w3c上是这样的：普通流，浮动，和绝对定位。这里我还不能很明确的说哪一种更好。
- 普通流是按照html的顺序来定位的。当position为static时，也会按照普通流来定位。
- 相对定位，是position为relative是产生作用的，就是在框原来普通流位置上进行表象的移动，实际上在页面上占据的位置不变。不会影响其他元素的位置。
- 绝对定位，position为absolute，元素已经脱离普通流定位了，会相对于其父元素进行定位，且父元素的position不能是static。没有的则是相对于body。可以覆盖其他元素。所以需要使用z-index来控制叠放顺序，z-index越高，元素位置就越在上。要使用z-index则必须给元素的position设值，且不能是static。关于z-index更多请看这篇文章。
position几个值：
- static，静止。元素按照普通流布局，不能使用z-index等，设值top，left等均无效。
- relative，相对定位，相对元素本身的位置定位。不会影响其他元素定位。
- absolute，绝对定位，脱离普通流定位，相对于其父元素定位。覆盖其他元素。
- inherit，继承父元素。
- sticky，CSS3中新的属性，在元素没有超过屏幕高度是类似，relative，超过后类似fixed，固定住了,但绝大多数浏览器不支持。刚查了只有Firefox可以。。少用
- fixed，固定定位。设值固定位置。一直不变。
浮动：这两天的认识，浮动呢，其实是元素自己本身的浮动。将元素设为浮动后，会表现的在文档中不存在一样。后面没设的会跑上来。浮动可以左右移动，知道碰到父元素的边框和其他浮动元素边框。
浮动元素不会影响块级框的布局，而只会影响内联框（文本）。
当浮动框高度超出包含框时，包含框不会自己增加高度，所以就会显示在外面。也叫（高度塌陷），因此需要闭合浮动。使其表现的像正常的一样。
当包含框中的所有元素浮动后，包含框就会像没有元素一样， 高度会为零（塌陷）。
<div id="wrap"> <div class="first"></div> <div class="second"></div> </div> .first, .second { float:left; background:red; 100px; height:50px; margin:10px; } #wrap { border:10px solid black; }
所以就需要清理浮动。