5.35.4相对定位和绝对定位.pptxVIP

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