position - float

1. position:static

所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。

一般来说，不用指定 position:static，除非想要覆盖之前设置的定位。

 

2. position:relative

如果设定 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】

元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

 

3. position:absolute

当指定 position:absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了。

绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

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

</p>

4. position:relative + position:absolute

如果我们给 div-1 设置 relative 定位，那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位，就可以把 div-1a 移动到 div-1 的右上方。

绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或 HTML 元素）。

 

注意：IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。

 

 

float

对于被浮动的元素，我们要时刻注意几点：

（1）元素被浮动后，浏览器实际上将它渲染到一个专门为float元素准备的plane中了。也就是说它从普通文档流中脱离了出来。

（2）虽然已经从普通文档流中脱离出来了，但是它还任然会影响普通文档流中的其他元素的布局。这是因为其他元素要围绕着它，就像对一张图片浮动后，其他文字要围绕着它一样。

（3）浮动元素的margin不会出现margin-collapse现象。

（4）如果你要对一个nonrepeacted元素要应用float，那么你必须要为其指定width。在CSS说明书中，我们可以得知，如果不为nonreplacted元素指定width，那么浏览器会以最小宽度  （一个字符的宽度）显示该元素。对于replaceted元素（如image,input），我们是不需要指定width就可以为它浮动的。

（5）任何被float的元素，都会生成一个block box。比如，对于Inline元素，本应该生成的是inline box，但是一旦它被浮动，它就会和box leave元素一样，生成block box。所以任何要被浮动的元素，我们无需再为他display:block。因为这是多此一举。

 

 

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。