任务目标

将页面指定按钮与通用头部进行定位。

任务要求

（1）将已完成课程播放页面整理为一个页面class.html。

（2）将指定按钮固定到页面右下方，距离右下角显示区域边缘附近。

（3）将通用头部内容区域通过黏性定位固定到页面顶部。

效果如下图：

任务实施

将已完成的页面内容复制备份并修改：

（1）将已完成的页面内容复制备份并修改。

（2）制作锚点链接作为置顶按钮。

（3）为header添加id属性，作为锚点目标。

（4）将置顶按钮定位在窗口可视区域右下角。

教学微课

教学课件

经验分享

当我们要使用绝对定位的时候，必需要有两个条件：

1.必须给父元素加定位属性，通常建议使用 position:relative(即：给父元素设为相对定位);

2.给子元素，加绝对定位position:absolute（给子元素设置为绝对定位）; 同时加方向属性（top ,left,rigth,bottom）。

能量贴士

喜怒哀乐之未发，谓之中;发而皆中节，谓之和。中也者，天下之大本也;和也者，天下之达道也。致中和，天地位焉，万物育焉。语出《中庸》。