今天来讲一下CSS中的绝对定位和相对定位，即position属性的使用方法。
position属性常见的值有三种：
- static: 不使用定位（默认值）。
- absolute: 使用绝对定位。
- relative: 使用相对定位。
在解释定位方式之前，首先要阐明文档流(document flow)的概念。浏览器在解释HTML文档时，它会将各个元素按照在HTML文档中出现的次序，从上到下依次排列。例如下面的代码将产生如下的效果：
绝对定位
将元素设置为 position:absolute 可以使其变为绝对定位。绝对定位的元素将不再包含于文档流之中，也就是说，浏览器在从上到下显示HTML文档的各个元素时会“忽略”掉绝对定位的元素，好像它根本不存在一样。如下图：
指定绝对定位之后，就可以通过left和top属性来指定该元素的位置。一般来说，left和top以浏览器内容区域的左上角为原点(0,0)。但有一个特例，即”当一个绝对定位的元素的父元素也被绝对定位，那么该元素的位置将以其父元素区域的左上角为原点”。
绝对定位由于可以直接指定左上角位置，因此页面布局会很容易。但是它无法处理带有页脚的页面布局，因为你无法确定正文内容的量，所以无法将页脚元素精确地定位到正文的下方。
相对定位
相对定位使得元素在原有位置的基础上移动top和left指定的距离。相对定位不会将元素从文档流中剔除，因此浏览器在显示相对定位的元素时，会当作它还在原有位置一样进行处理。如下面的代码，可以看到div1和div3之间留出了div2的位置，而实际上div2已经向右下方偏移了一定的距离。
相对定位可以很好地解决绝对定位无法做到的页脚布局问题。
应用
最后再用CSS Zen Garden上的一个 例子来说明相对定位的应用。这个设计的页面最下方，一条巨龙盘踞在文字栏的上方。
显然，我们无法确定正文内容的多少，因此使用绝对定位无法将龙的图像精确地定位在文字栏之上。但作者利用相对定位就很好地解决了这个问题。巨龙图像元素的CSS代码如下：
#extraDiv1 { position: relative; top: -225px; left: -360px; margin: 0 auto; width: 96px; height: 206px; background-image: url(Dragon.gif); background-position: left top; background-repeat: no-repeat; }
去掉position:relative属性也许能更为明显地看到这个技巧的用法。巨龙本应位于整个文档的下方，设计师通过相对定位将他移动到了文字栏之上。
