CSS定位机制：position

　　CSS的定位机制分为三种，分别是文档流，浮动和定位。　　
　　其中文档流的意义就
是按照html里面的写法从上到下从左到右的布局。
　　浮动包括两种，左浮动和右浮动，直到它的外边框边缘碰到包含框或另一个浮动框的边缘。任意的浮动使元素脱离了文档的普通流，就像在文档中不占据空间。但如果包含块太窄，无法容纳水平排列的浮动元素，那么其他浮动块会向下移动，直到有足够多的空间。
　　position 属性规定元素的定位类型。但是任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。下面主要理解一下position的几个不同的定位类型。
　
　　首先要明确，position定位从哪里开始？对于设定了padding，margin的元素，这一点十分很重要了。

设置了position属性的元素在父元素的border内部进行定位但不包括border。

具体看一下这四个值的规定：
absolute ：

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 “left”, “top”,”right” 以及 “bottom” 属性进行规定。

absolute生成绝对定位的元素，它的定位是相对于static定位以外的第一个父元素进行定位，也就是说如果父元素没有明确设置position属性，元素将继续向外寻找，直到遇到第一个position属性不为static属性的元素为父元素进行定位。并且，absolute使元素脱离了文档流，不占据空间。可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。z-index越大，显示的优先级越高。

fixed ：

生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom”属性进行规定。

fixed生成绝对定位的元素，它的定位相对于浏览器窗口进行定位。因此，它在浏览器中的显示是固定的，随着滚动条的滚动其位置不发生变化。这种定位方式也使元素脱离了文档流，不占据空间。
relative ：

生成相对定位的元素，相对于其正常位置进行定位。 因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。

static ：

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

如果元素没有设置定位属性，那么它的position为默认static即没有定位。它的文档流按照普通html文档从上到下从左到右进行布局。

在实际应用的时候，用到最多的是设置父元素定位为relative，然后内部元素进行absolute定位。fixed这种方式通常是需要页面某一部分固定在某一位置，大多是固定的导航或者广告等。
更多精彩内容请访问：前端博客