1、任务12 元素的定位第五单元 盒子模型学习目标固定定位（fixed）静态定位（static）相对定位（relative）绝对定位（absolute）掌握不同定位模式的应用场合了解:学习目标任务目标实战演练制作旅游景点推荐网banner强化训练制作个人博客首页知识准备1.元素的定位n 元素的定位：可以精确定义一个元素的准确位置（1）定位模式：position属性 static：静态定位 relative：相对定位 absolute：绝对定位 fixed：固定定位 （2）边偏移：left：左侧偏移量 right：右侧偏移量 top：顶端偏移量 bottom：底部偏移量知识准备2.静态定位（stat
2、ic）n 静态定位（static）：网页元素默认的定位方式，元素按照标准流进行布局。n 不能通过设置边偏移属性left、right、top、bottom值来改变元素的位置。知识准备3.相对定位（relative）n 相对定位（relative）：网页元素相对于其在原文档流的位置进行定位，当元素设置为相对定位“position:relative;”，该元素就会相对于其自身的默认位置进行偏移，但是它在文档流中的位置仍然保留。知识准备示例：元素的相对定位 body margin:0px;padding:0px;font-size:18px;font-weight:bold;.father margi
3、n:10px auto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1px dashed#666;.box1,.box2,.box3 width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px 0px;border:1px solid#999;box1 box2 box3 .box2 position:relative;/*相对定位*/left:150px;/*距离原位置左边
4、线150px*/top:100px;/*距离原位置顶部边线100px*/知识准备 4.绝对定位（absolute）n 绝对定位（absolute）：将元素相对于距离其最近的、已经定位（相对、绝对或固定定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。n 当元素设置为绝对定位“position:absolute;”，该元素就会相对于其父元素或body根元素进行偏移，脱离文档流，它在文档流中的位置将被其他元素占据。知识准备示例：元素的绝对定位 body margin:0px;padding:0px;font-size:18px;font-weight:bo
5、ld;.father margin:10px auto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1px dashed#666;.box1,.box2,.box3 width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px 0px;border:1px solid#999;box1 box2 box3 .box2 position:absolute;/*绝对定位*/left
6、:150px;/*距离父元素左边线150px*/top:100px;/*距离父元素顶部边线100px*/知识准备示例：“子绝父相”原则 body margin:0px;padding:0px;font-size:18px;font-weight:bold;.father position:relative;margin:10px auto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1px dashed#666;.box1,.box2,.box3 width:100px;height:50px;li
7、ne-height:50px;text-align:center;background-color:#9F6;margin:15px 0px;border:1px solid#999;box1 box2 box3 .box2 position:absolute;/*绝对定位*/left:150px;/*距离父元素左边线150px*/top:100px;/*距离父元素顶部边线100px*/知识准备5.固定定位（fixed）n 固定定位（fixed）：相对于浏览器窗口进行定位。n 元素设置为固定定位之后，就会脱离原来的文档流进行定位，原有的位置将被其他元素占据。n 无论浏览器窗口大小如何改变，浏览
8、器滚动条如何拖动，固定定位的元素都将显示在浏览器的固定位置。知识准备6.z-index层叠等级属性n z-index层叠等级属性：定义叠加元素的堆叠顺序，其值可以取正整数、0、负整数，默认值为0，取值越大，定位元素的位置就越靠上。实战演练 案例描述：设计并制作旅游景点推荐网banner，网页效果如下图1所示。当鼠标移动到每个导航选项上时，超链接的样式将会发生变化，效果如图2所示。制作旅游景点推荐网banner图1图2网页布局图强化训练案例描述：设计并制作个人博客首页，网页效果如下。制作个人博客首页任务小结01静态定位static02相对定位relative03绝对定位absolute04固定定位fixed课后实训设计新闻列表页面，效果如图所示。谢谢观看
