网页设计与制作 课件 o13 制作图文重叠效果（定位）.pptxVIP

制作图文重叠效果湖南安全技术职业学院网页设计与制作教学团队模块5使用浮动与定位属性布局网页

入门测作业分析知识回顾标准流浮动：float:left;清除浮动通常在父级元素中设置：overflow:hidden;复习巩固

网页中有些元素之间是重叠关系的，比如字在图上，还有些元素是停留在固定的位置，不受滚动条拖动的影响，比如长页面中的“返回顶端”按钮等，这些都需要对标签的位置进行精确的控制。本任务学习元素定位的相关知识，实现图文重叠效果。

定位属性（position）staticrelativeabsolutefixedz-index学习内容

设置定位方式元素定位元素定位：定位方式（position）+边偏移量实现对页面元素位置的精确、自由控制。position属性设置定位元素的参照对象语法：position:static|relative|absolute|fixedstatic:静态定位，默认值，遵循标准流relative:相对定位absolute:绝对定位fixed:固定定位脱离标准流

设置偏移量元素定位元素定位：定位方式（position）+边偏移量实现对页面元素位置的精确、自由控制。设置边偏移量，以像素为单位top:顶端偏移量bottom:底端偏移量left:左侧偏移量right:右