任务目标

使用粘性定位页面通用头部

任务要求

（1）将页面通用头部在9.3任务的基础上，实现header部分的黏性定位，定位于页面顶部。

（2）并滚动垂直滚动条验证效果是否正确。

效果如下图：

任务实施

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

（2）为header部分增减黏性定位。

（3）并设定定位偏移量。

教学微课

教学课件

扩展实践

粘性定位的出现是为了解决，之前如果想实现页面内容不在可视区域时，可以动态进行定位方式的变更，必须要借助js进行复杂繁琐的页面滚动状态的判断弊端。作为CSS3的新特性，当前主流浏览器版本均能正常的支持该样式属性。

能量贴士

君子和而不同，小人同而不和。语出《论语》。