5.3,5.4相对定位和绝对定位.pptx

《5.3,5.4相对定位和绝对定位.pptx》由会员分享，可在线阅读，更多相关《5.3,5.4相对定位和绝对定位.pptx（12页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、相对定位和绝对定位一、温故而知新一、温故而知新n回顾浮动（float）定位的特性及属性（结合上机作业）浮动在文本中的使用浮动在布局中的使用清除浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止浮动框不在文档流中，文档流中普通框会对浮动框视而不见浮动元素会生成一个块级元素，而不论它本身是何种元素n利用浮动知识和定义列表，分析下图效果：二、教学目标二、教学目标1.充分理解相对定位和绝对定位（重点）2.可独立实现网页中链接的跳动效果（点击查看效果）、添加凡客网中产品的标识（如下图效果）3.能明确的区别浮动定位、相对定位和绝对定位（难点）3.1 3.1 相对定位相对定位n

2、Position:relativen准备：三个水平方向的盒子（点击查看）n演示：将框2在原有的基础上往下移动20px，往右移动30px 代码：position:relative;top:20px;left:30px;效果：n小结：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。3.2 3.2 随堂练习随堂练习1 1n鼠标经过链接，链接的文字有下沉效果（点击查看效果）注：可把a转化为块级元素3.3 3.3 绝对定位绝对定位nPosition:absoluten演示：将框2在原有的基础上进行改动 代码：position:absolute;top:20px

3、;left:30px;n效果：n小结：设置为绝对定位的元素框从文档流完全删除，彻底的浮在页面上，可以放在整个网页中的任意一个位置，现在看来就是相对于网页（或者说是整个body文档）进行移动，那么就可以说这个网页就是这个设置了绝对定位元素的祖先元素n思考：根据效果显示，总结绝对定位与相对定位的区别。3.4 3.4 随堂练习随堂练习2 2n实现下图凡客网上产品标识的效果n 分析：如果要实现上述效果，祖先元素就会改变，怎样才能让绝对定位的元素知道祖先元素是谁呢？一级一级的往上找，直到遇见哪个元素的position是relative，那么这个元素就是祖先元素。n代码演示3.5 3.5 其它定位其它定位

4、nposition:static 静态定位 这是默认的属性值，也就是该盒子按照标准流进行布局nposition:fixed 固定定位 和绝对定位类似，只是以浏览器窗口为基准进行定位而不是祖先元素，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变，不兼容ie6n代码演示3.6 3.6 定位小结定位小结*n相对定位的属性和属性值是：position:relative,设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。n绝对定位的属性和属性值是：position:absolute，绝对定位完全脱离文档流的，是“相对于”他的祖先元素进行定位，如果没有自定

5、义设置祖先元素，那么默认祖先元素就是body。若想相对于其父元素进行定位，则需要给其父元素设置position:relative。n固定定位略n总结相对定位、绝对定位和浮动定位的区别3.7 3.7 z-indexz-index空间位置空间位置n Z-index用来调整定位时重叠块的上下位置，与它的名称一样。点击查看效果n Z-index属性的值为整数，可以是正数也可以是负数。当块被设置了position属性时，该值便可设置各块之间的重叠高度关系。默认的z-index值为0，当两个块的z-index值一样时，将保持原有的高低覆盖关系。四、小结四、小结总结我们这节课主要学习了什么？实现了什么效果？五、课下作业五、课下作业n练习网页链接跳动效果 和凡客网上产品标识效果n注意总结浮动定位、相对定位、绝对定位的区别和适用范围n上机任务参照上机文档n回顾知识，准备小测试