今天来讲一下CSS中的绝对定位和相对定位，即position属性的使用方法。

position属性常见的值有三种：

  • static: 不使用定位（默认值）。
  • absolute: 使用绝对定位。
  • relative: 使用相对定位。

在解释定位方式之前，首先要阐明文档流(document flow)的概念。 浏览器在解释HTML文档时，它会将各个元素按照在HTML文档中出现的次序， 从上到下依次排列。例如下面的代码将产生如下的效果：

document-flow.png

绝对定位

将元素设置为 position:absolute 可以使其变为绝对定位。 绝对定位的元素将不再包含于文档流之中，也就是说， 浏览器在从上到下显示HTML文档的各个元素时会“忽略”掉绝对定位的元素， 好像它根本不存在一样。如下图：

absolute-positioning.png

指定绝对定位之后，就可以通过left和top属性来指定该元素的位置。 一般来说，left和top以浏览器内容区域的左上角为原点(0,0)。 但有一个特例，即当一个绝对定位的元素的父元素也被绝对定位， 那么该元素的位置将以其父元素区域的左上角为原点。

absolute-top-left.png

绝对定位由于可以直接指定左上角位置，因此页面布局会很容易。 但是它无法处理带有页脚的页面布局，因为你无法确定正文内容的量， 所以无法将页脚元素精确地定位到正文的下方。

相对定位

相对定位使得元素在原有位置的基础上移动top和left指定的距离。 相对定位不会将元素从文档流中剔除，因此浏览器在显示相对定位的元素时， 会当作它还在原有位置一样进行处理。如下面的代码，可以看到div1和div3之间 留出了div2的位置，而实际上div2已经向右下方偏移了一定的距离。

relative-positioning.png

相对定位可以很好地解决绝对定位无法做到的页脚布局问题。

应用

最后再用CSS Zen Garden上的一个 例子来说明相对定位的应用。 这个设计的页面最下方，一条巨龙盘踞在文字栏的上方。

csszengarden-070.png

显然，我们无法确定正文内容的多少，因此使用绝对定位无法将龙的图像 精确地定位在文字栏之上。但作者利用相对定位就很好地解决了这个问题。 巨龙图像元素的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属性也许能更为明显地看到这个技巧的用法。 巨龙本应位于整个文档的下方，设计师通过相对定位将他移动到了文字栏之上。

csszengarden-070-2.png