在CSS布局网页时，经常会用到相对定位、绝对定位、固定定位来布局HTML元素，下面来举例说明它们之间的区别。
方法/步骤
新建一个HTML文件，命名为test.html，用于举例说明相对定位、绝对定位、固定定位的区别。
相对定位
1
在test.html页面使用h2标签定义三个标题，第一个标题是正常的标题，第二个和第三个标题分别定义一个class，用于下面定义样式说明相对定位起到的作用。
2
使用相对定位的方法定义第二个标题和第三个标题的位置。通过运行代码后，可见，相对定位是按照元素的原始位置对该元素进行移动的。第二个标题的位置是从元素的原始左侧位置减去20像素，第三个标题的位置是向元素的原始左侧位置增加20像素。
绝对定位
1
在test.html页面使用h2定义两个标题，第二个标题定义class属性，用于下面获得该元素定义其CSS样式。
2
使用CSS对第二个h2标签进行绝对定位，距离页面的左边100像素，距离页面的顶部150像素。可见，与相对定位不同的地方是，相对定位是相对元素原始位置的定位，绝对定位是对整个页面的边缘位置的定位。
固定定位
1
在test.html页面使用h2定义两个标题，第二个标题定义class属性，用于下面获得该元素定义其CSS样式。
2
使用CSS对第二个h2标签进行固定定位，距离页面的左边100像素，距离页面的顶部150像素。可见，与绝对定位基本一样，都是相对于页面的边缘进行的定位，绝对定位常与相对定位配合使用，固定定位不支持IE6浏览器。