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

 时间:2026-02-12 00:24:13

1、新建一个HTML文件,命名为test.html,用于举例说明相对定位、绝对定位、固定定位的区别。

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

1、在test.html页面使用h2标签定义三个标题,第一个标题是正常的标题,第二个和第三个标题分别定义一个class,用于下面定义样式说明相对定位起到的作用。

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

2、使用相对定位的方法定义第二个标题和第三个标题的位置。通过运行代码后,可见,相对定位是按照元素的原始位置对该元素进行移动的。第二个标题的位置是从元素的原始左侧位置减去20像素,第三个标题的位置是向元素的原始左侧位置增加20像素。

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

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

1、在test.html页面使用h2定义两个标题,第二个标题定义class属性,用于下面获得该元素定义其CSS样式。

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

2、使用CSS对第二个h2标签进行绝对定位,距离页面的左边100像素,距离页面的顶部150像素。可见,与相对定位不同的地方是,相对定位是相对元素原始位置的定位,绝对定位是对整个页面的边缘位置的定位。

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

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

1、在test.html页面使用h2定义两个标题,第二个标题定义class属性,用于下面获得该元素定义其CSS样式。

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

2、使用CSS对第二个h2标签进行固定定位,距离页面的左边100像素,距离页面的顶部150像素。可见,与绝对定位基本一样,都是相对于页面的边缘进行的定位,绝对定位常与相对定位配合使用,固定定位不支持IE6浏览器。

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

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

  • Animate设置倾斜字体方法
  • 网页制作中音乐播放代码。
  • HTML5—在网页中插入视频方法
  • instanceof运算符的作用
  • html怎么设置背景色?
  • 热门搜索
    依依惜别手抄报 病毒手抄报内容写什么 手抄报图片大全5年级 小学生英语手抄报 劳动节的手抄报 感恩老师手抄报内容 交通安全手抄报资料 快乐寒假手抄报 重阳节手抄报内容大全 尊老敬老的手抄报