这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别，定位为relative的元素脱离正常的文本流，但其在文本流中的位置依然存在，而定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。
详解CSS+DIV布局定位
CSS+DIV的布局定位有四种情况，即position有四个属性值：relative,absolute,static,fixed。
position各个属性值的定义：
- static：默认值。没有定位，元素出现在正常的流中（top,bottom,left,right或者z-index声明无效）。
- relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
- absolute：生成绝对定位的元素，相对于除static定位以外的第一个父元素(absolute、relative、fixed)进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。
- fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。
relative
定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。如图
黄色背景的层定位为relative，红色边框区域为其在正常流中的位置。在通过top、left对其定位后，灰色背景层代表其他元素的位置，图中可以看出黄色背景层的正常位置依然存在。
absolute
定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。如图
可以看到，在将黄色背景层定位为absolute后，灰色背景层自动补上。
relative与absolute的主要区别：
首先，是上面已经提到过的在正常流中的位置存在与否。
其次，relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。如图
图中，红色背景层为relative定位，其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute，则情形如下图
可以看到，红色背景层依然定义top:20px；left:20px；但其相对的元素变为定位方式为absolute或relative或fixed的黄色背景层。因此，对于absolute定位的层总是相对于其最近的定义为absolute或relative或fixed的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位，如下图
转载网址：http://developer.51cto.com/art/201009/225201.htm