任务目标

     使用CSS浮动和定位实现新云课堂课程层叠角标

任务要求

（1）按照效果图在已有的HTML文件基础上，实现如下效果。

（2）使用浮动将课程水平排列至一行。

（3）设置三种右上角上层状态标志HOT、UPAGRADE、NEW，分别设置对应的样式效果。

（4）使用绝对定位方式进行角标位置。

效果图如下：

任务实施

（1）对已完成的页面内容进行备份并修改。

（2）设定课程单元相对定位。

（3）设定课程单元中的角标对应元素绝对定位，并设定偏移量，使角标定位在课程单元右上角。

（4）使用::after选择器设定3种不同的角标的样式内容。

教学微课

教学课件

经验分享

如果进行绝对定位的元素，找不到最近的已经定位的”祖先”元素，则将body元素作为定位的参考依据。

这里的已定位指的是元素的定位置为relative、absolute或者fixed之一，通常是用relative与absolute进行组合使用，因为给参考元素仅仅添加相对定位属性而不提供偏移属性的话，对与参考元素没有任何影响。

能量贴士

博学之，审问之，慎思之，明辨之，笃行之。语出《中庸》。