CSS教程：相对定位、绝对定位、固定定位的区别

1、新建一个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浏览器。