一、温故而知新
回顾浮动（float）定位的特性及属性（结合上机作业） ① 浮动在文本中的使用 ② 浮动在布局中的使用 ③ 清除浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮 动框的边框为止
浮动框不在文档流中，文档流中普通框会对浮动框视而不见 浮动元素会生成一个块级元素，而不论它本身是何种元素
固定定位略
总结相对定位、绝对定位和浮动定位的区别
3.7 z-index空间位置
Z-index用来调整定位时重叠块的上下位置，与 它的名称一样。点击查看效果
Z-index属性的值为整数，可以是正数也可以是 负数。当块被设置了position属性时，该值便可设 置各块之间的重叠高度关系。默认的z-index值为 0，当两个块的z-index值一样时，将保持原有的 高低覆盖关系。
30px 代码：position:relative; top:20px;left:30px; 效果：
小结：设置为相对定位的元素框会偏移某个距离。元素仍 然保持其未定位前的形状，它原本所占的空间仍保留。
3ቤተ መጻሕፍቲ ባይዱ2 随堂练习1
鼠标经过链接，链接的文字有下沉效果（点击查看效 果）
① 注：可把a转化为块级元素
3.5 其它定位
position:static 静态定位 这是默认的属性值，也 就是该盒子按照标准流进行布局
position:fixed 固定定位 和绝对定位类似，只是 以浏览器窗口为基准进行定位而不是祖先元素， 也就是当拖动浏览器窗口的滚动条时，依然保持 对象位置不变，不兼容ie6
代码演示
利用浮动知识和定义列表，分析下图效果：
二、教学目标
1. 充分理解相对定位和绝对定位（重点） 2. 可独立实现网页中链接的跳动效果（点击查看
效果）、添加凡客网中产品的标识（如下图效 果）
3. 能明确的区别浮动定位、相对定位和绝对定位 （难点）
3.1 相对定位
Position:relative 准备：三个水平方向的盒子（点击查看） 演示：将框2在原有的基础上往下移动20px，往右移动
3.3 绝对定位
Position:absolute 演示：将框2在原有的基础上进行改动
代码：position:absolute; top:20px;left:30px; 效果：
小结：设置为绝对定位的元素框从文档流完全删除，彻底 的浮在页面上，可以放在整个网页中的任意一个位置，现 在看来就是相对于网页（或者说是整个body文档）进行移 动，那么就可以说这个网页就是这个设置了绝对定位元素 的祖先元素
四、小结
总结我们这节课主要学习了什么？ 实现了什么效果？
五、课下作业
练习网页链接跳动效果 和凡客网上产品标 识效果
注意总结浮动定位、相对定位、绝对定位 的区别和适用范围
上机任务参照上机文档 回顾知识，准备小测试
3.6 定位小结*
相对定位的属性和属性值是：position:relative,设置为 相对定位的元素框会偏移某个距离。元素仍然保持其 未定位前的形状，它原本所占的空间仍保留。
绝对定位的属性和属性值是：position:absolute，绝 对定位完全脱离文档流的，是“相对于”他的祖先元 素进行定位，如果没有自定义设置祖先元素，那么默 认祖先元素就是body。若想相对于其父元素进行定位， 则需要给其父元素设置position:relative。
思考：根据效果显示，总结绝对定位与相对定位的区别。
3.4 随堂练习2
实现下图凡客网上产品标识的效果
分析：如果要实现上述效果，祖先元素就会改变，怎样才能让 绝对定位的元素知道祖先元素是谁呢？一级一级的往上找，直 到遇见哪个元素的position是relative，那么这个元素就是祖先 元素。
代码演示