理解绝对定位和相对定位布局

概要：

本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。

本文的示例源码下载：

远程下载：这个附件demo。（9.15 KB）

本站下载：328_demo.rar （9.15 KB）

说明：
占位空间：元素在文档流中所占据的空间。
物理空间：元素本身所占据的空间。

下面分3种情况分别对相对定位和绝对定位进行讨论：
1.只使用css第一组属性布局定位元素的情况
2.只使用css第二组属性布局定位元素的情况
3.混合使用第一组和第二组属性的情况

图1为未定位时的初始效果，
层级关系为：
<div
  <div box1
  <div box2
  <div box3
效果图：

图1

一、用相对定位布局块级元素
元素设置position值： position:relative
此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素）

1.仅使用left、right、top和bottom属性布局相对定位元素的情况
元素原本所占的占位空间仍保留，物理空间偏移。

图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。
层级关系为：
<div
  <div box1
  <div box2 ——– position:relative ; top:-60px; left:80px;
  <div box3
效果图：

图2